Aggregate Fronteend

aggregate-fronteend

Unify, Simplify, Aggregate!

📝 Table of Contents

• About
• Getting Started
• Deployment
• Usage And Features
• Built Using
• TODO
• Contributing
• Authors
• Acknowledgments

🧐 About

The Aggregate front-end is a fully integrated and user friendly svelte application design to seamlessly integrate with the sister project: The Aggregate Backend

Aggregate brings together your favorite news sources, blogs, and updates into a single, easy-to-navigate platform. Our goal is to make sure you never miss out on important updates while providing you with a personalized experience. Whether it's tech news, sports updates, or the latest gadgets, Aggregate ensures you stay informed effortlessly.

🏁 Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

💡🔔Heads Up The app uses page.server.js to communicate with the aggregate backend with the exception of formless requests such as the feed follows and favorites system which use the API methods using server.js in the /api route.

Prerequisites

Prior to running the Aggregate project, you need to make sure that you have the following installed in your system:

• Node.js: This project is built with Svelte, which requires Node.js to run. You can download Node.js from the official website.

• Visual Studio Code: This is the recommended code editor for this project. You can download it from the official website.

• Svelte: This project is built with Svelte. You can install it globally on your system by running npm install -g svelte.

• Golang and The Aggregate Back-end: This can be found here

Installing

You can hit the ground running by:

1. Cloning the Repo: Clone this repo by doing

   git clone https://github.com/Blue-Davinci/Aggregate-Frontend.git
   

2. Navigate to the Project Directory: Done with downloading the repo? Go ahead and navigate to the directory by doing: Say what the step will be

cd aggregate-frontend

3. Install Node.Js: Haven't installed node.js? What are you waiting for, go ahead and download it from their official website

4. Install Svelte: Now get your nose deep by downloading svelte like below:

   npm create svelte@latest 
   

5. Install the project's dependancies: Proceed and install the project's dependancies by running:

   npm install
   

6. Launch the Aggregate Backend: Start and launch the backend server by following the instructions here

7. Make sure you have the following 2 files in the root folder i.e Aggregate-Frontend\ as they hold all the links used to interact with the API:

   .env.development
   .env.production
   

8. We use cloudinary, found documented here, for hosting the User avatars. So create a file called .env on the root (where the above env.dev... are) and add your key + secret as Shown below:

CLOUDINARY_API_KEY=<cloudinary api key xxxxxx>
CLOUDINARY_API_SECRET=<cloudinary api secret yyyyy>

• You also need to add an encryption key and IV in the above file which will be used in encrypting the user api_keys. You can generate both the IV and Encryption key via the generator.js in lib\utilities\encryption.js
• For a quick generation you can use the javascript debugger terminal by first navigating to the directory:

cd src/lib/utilities

• Then execute the file by running:

node encryption.js

• You will find a .env file in the same directory. You can open and copy the data to the root .env, which should have your cloudinary secrets, or change it with the Admin dashboard (in the pipeline)

8. After a succesful setup+startup of the Aggregate backend API - above- proceed and start the development server by running:

   npm run dev
   

   The Aggreagte Frontend should now be running on your local machine. You can access it by opening your web browser and navigating to http://localhost:5173 (or the port number displayed in your terminal).

• After a successful startup and login, you should have something like this:

🎈 Usage And Features

The basics of the app includes:

1. Homepage: This is the first page for users http://localhost:5173 and contains the landing page shown as the first image in this readme.

   • The app supports a smooth Dark as well as Light themes

2. Feeds: This contains all the feeds that a user can create, follow, hide, manage and more.

   • Ability to follow and unfollow feeds
   • You can search and filter all feeds
   • Ability To Hide any feed that a registered user has added (this feed will only be accessible by the user who created the feed only)
   • Feed manager to manage added/created feeds including updating them.
   • View the currently top followed feeds
   • View the top users who've added feeds including their unique scores calculated by our backend algorithm.
   • Ability to share the feed with other users (linked in, pinterest, twitter, facebook and direct to clip).

3. About: No one knows what it means, but it’s provocative… it gets the people going!

4. Login & Signup: They contain the links for a user to login and also create an account.

   • Supports password recovery/reset
   • Supports SMTP server and token authentication
   • Supports user account activation
   • User Account Manager: panel for a user to update their:
     • Avatar/ Profile picture
     • Username
     • Password (in the pipeline)

5. Dashboard: This only appears after login and is a main page. It contains posts that have been followed by the user and:

   • Ability to search for and filter all followed feed posts
   • Ability to favorite and unfavorite feeds posts
   • Ability to view detailed info for the feed posts which supports HTML content as well as videos
   • Ability to share the posts with other users. If a user doesn't follow a post's feed, they will Be alerted and provided an option to go and follow the feed.
   • Support for comments with the following features:
     • Supports emojis
     • Create your own comments and reply to others
     • Ability to edit and delete your comments
     • Notifications for any post a user favorited or from any reply to a user's comment.
   • Ability to view your followed feeds
   • Ability to access your favorite posts
   • Ability to add new feeds for people to view and follow as well, including setting their visibility.
   • Ability to download the posts for registered users into pdf, json and markdown formats.
   • Ratings for best followed feeds. (In the Pipeline)

6. Payment: A feature that allows users to subscribe and transact within the app based on available subscription plans.

   • Users have certain limitations imposed which can only be lifted if on a subscription plan.
   • Users can choose between all of the available subscription plans
   • Admins can add/delete/update subscription plans
   • Mobile Money payment options are also available.
   • Users can view/search and see statistics of their previous transactions as well as subscription statuses.
   • Challenged transactions, if encountered, appear on a navigation to the dashboard allowing a user to resolve, hide of completely cancel them
   • Users can cancel their subscriptions at anytime. Cancelled subscriptions are valid as long as they have not expired

7. Admin Dashboard + Permissions: ability to manage and and perform administration operations

   • Announcement Management. Admins can view existing announcements as well as create new ones that will be shown to all users. Admins can also remove\delete existing announcements. Each of them supports different urgencies. They also show a subset of available statistics including running, expired, inactive announcements etc.
   • Feed Manager. Now an admin can view all available feeds including specific statistics. They can choose to approve/reject them, update them, hide/unhide or even delete a feed completel.
   • Can view full system statistics including user, financial, content and debug information
   • View charts and information on subscriptions including total sales, profits etc
   • Manage and view users including deleting as well as banning them
   • Manage permissions for users, add them and remove them as well
   • Quick operations such as making a user an admin as well as a moderator or demoting them
   • Add subscription plans, hide them as well as update existing ones
   • Manage susbcriptions, Check all challenged transactions for subscriptions as well as cancel subscriptions.
   • Subscription reports. Get indepth subscription statistics including churn rates, revenue, ratios of cancels and subscriptions etc
   • Error manager. Currently supports errors relating to the scraper includind brovken/non functional Feed urls.

   More operations are currently in the pipeline

8. Logout: And awaaaaaaaay, you go.

🚀 Deployment

Docker

Dockerfile and Docker Compose Setup:

The application uses a multi-stage Dockerfile for building and running the application. The build stage uses a Node.js base image to install dependencies and build the application. The final stage prepares the runtime environment. The docker-compose.yml file orchestrates the build and deployment process, ensuring the application is containerized and runs as expected.

To Build the application:

1. Navigate to project directory:

   cd aggregate-frontend
   

2. Check and verify the following file incase you want to change any configs:

docker-compose.yml
Dockerfile

3. Run the following command to build the docker image based on the docker-compose.yml file:

docker compose up --build

🔍 The --build option ensures that Docker Compose rebuilds the image, which is useful for incorporating the latest changes in the source code or dependencies.

A note:

• The application uses different API connection strings based on the environment (development or production).
• The settings can be found in the .env.development and .env.production files. The prod strings involve connections to & from the docker container.

You can replace this with your own connection strings.

⛏️ Built Using

• Node.js - Server Environment
• Tailwind CSS - CSS Framework
• Svelte - Innovative Framework for building user interfaces
• SvelteKit - Framework for building web applications with Svelte
• Paystack - Give your customers the gift of modern, frictionless, painless payments. Integrate Paystack once and let your customers pay you however they want.
• Cloudinary - Cloudinary is a cloud-based service that provides an end-to-end image and video management solution, including uploads, storage, manipulations, optimizations, and delivery.
• Zod - TypeScript-first schema validation with static type inference
• Shad-CN Svelte - Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
• Svelte-Toast - Toast notification library for Svelte
• Svelte-Confetti - Add a burst of fun to your Svelte applications with customizable confetti components. Open Source and easy to integrate.
• RoboHash - Robohash is a easy web service that makes it easy to provide unique, robot/alien/monster/whatever images for any text.
• Lucid-Svelte - Beautiful & consistent icons
• Box-Icons - High Quality Web Icons Simple Open Source icons carefully crafted for designers & developers. Made by the community.
• Other items not mentioned.

✍️ Authors

• @Blue-Davinci - Idea & Initial work

🎉 Acknowledgements

👥 See also the list of contributors who participated in this project.

💡 Inspiration

The inspiration for Aggregate comes from my personal struggle with managing and consuming content from multiple websites. As an avid reader and tech enthusiast, I found it challenging to stay updated with the latest news, articles, and blog posts. This project became an opportunity to solve a real problem I faced while learning new technologies and honing my development skills.

🎩✨ Hat tip to:

• Official Svelte
• HuntaByte
• Any and all people whose libraries\codes were used.