📖 Table of Contents

• 📝 Contributors
• 👨‍💻 Teck Stack
• 🚀 Backend Documentation
• 🌟 Frontend Documentation
• 🧾 License

📝 Contributors

• Parsa - Fullstack Developer & Project Lead
• Shivam - Fullstack Developer
• Vishnu - UI Specialist & Frontend Developer
• Gurnoor - Backend Developer
• Dannick - Backend Developer
• David - Backend Developer
• Thomas - Backend Developer

👨‍💻 Tech Stack

• Frontend

  

• Backend

  

• Testing

  

• Deployment

  

• CI/CD

  

🚀 Backend Documentation

🏃 Quickstart

To run the backend server locally:

1. Make sure you have Node.js installed on your system.

2. Clone the repository to your local machine.

   git clone https://github.com/ParsaKargari/Progress.git

3. Navigate to the backend directory.

   cd backend

4. Install the necessary packages.

   npm install --force

5. Ensure you have a .env file in the root of the backend directory with the necessary environment variables set:

   SUPABASE_URL=your_supabase_url
   SUPABASE_ANON_KEY=your_supabase_anon_key
   SPOTIFY_REDIRECT_URI=your_spotify_redirect_uri
   SPOTIFY_CLIENT_SECRET=your_spotify_client_secret
   SPOTIFY_CLIENT_ID=your_spotify_client_id
   PORT_NUMBER=your_port_number
   SPOTIFY_REDIRECT_URL=your_spotify_redirect_url
   

6. Start the backend server.

   npm start

🛠️ Installation

After cloning the repository and navigating to the backend directory, run:

npm install --force

This will install all the dependencies defined in the package.json file necessary for the backend server to run.

🧪 Testing

Testing is implemented with Jest. Run the following command to execute the tests:

npm test

Make sure to have testing environment variables set or a testing configuration that the tests can utilize without interfering with the production or development databases. Make sure to have the backend server running for the URLs to be tested.

🧰 Backend Dependencies

• Express.js as the web application framework.
• Supabase for data storage and retrieval.
• Dotenv to load environment variables from an .env file.
• Other utilities for logging, error handling, and HTTP request parsing.

🔧 Development Tools

• Nodemon for automatically restarting the server upon changes during development.
• Jest and Supertest for testing backend functionality.

🌟 Frontend Documentation

This section covers the necessary steps to get the frontend of the Progress app up and running on your local development machine, including setup, installation, dependencies, testing, building, and deployment.

🏃 Quickstart

To get started quickly with the frontend of the Progress app, follow these steps:

1. Clone the repository to your local machine. git clone https://github.com/ParsaKargari/Progress.git.
2. Navigate to the project's frontend directory. cd ./frontend/ from the root directory of the project.
3. Run npm install --force to install all the required dependencies.
4. Once the dependencies are installed, you can start the development server by running npm start.

🛠️ Dependencies & Packages

The Progress frontend is built using React and utilizes several additional libraries and frameworks to enhance its functionality and design. Here's a list of the key dependencies:

• UI Frameworks & Design

  • Tailwind CSS: A utility-first CSS framework for rapidly building custom designs.
  • Material-UI: A popular React UI framework that provides a set of components and styles for building modern web applications.

• Date Handling

  • day.js: A minimalist JavaScript library that provides a simple and efficient way to handle dates and times.

• Other Utilities

  • react-heat-map: A React component for rendering heatmaps.

🧪 Testing

The frontend of the Progress app is tested using Selenium UI Testing.

🚀 Building & Deployment

To build the frontend of the Progress app, use the following command:

npm run build

This will create a production-ready build of the frontend in the ./build directory. You can then deploy this build to a web server or hosting service of your choice.

🌐 Deployment

The frontend of the Progress app is deployed using GitHub Pages. The deployment process is automated using GitHub Actions, which builds and deploys the frontend to GitHub Pages on every push to the main branch.

📚 Additional Resources

• React Documentation: The official documentation for React.
• Tailwind CSS Documentation: The official documentation for Tailwind CSS.
• Material-UI Documentation: The official documentation for Material-UI.
• Jest Documentation: The official documentation for Jest.

🧾 License

This project is licensed under the MIT License - see the LICENSE file for details.