Refracting Frontend Code - Milestone 2 FOSS (Overflow 2024)

.gitignore

@@ -4,4 +4,5 @@ node_modules
 *.log
 *.env
 *.pyc
-*.sqlite3
+*.sqlite3
+/overflow

README.md

@@ -1,104 +1,90 @@
-<h1 align="center">Welcome to the Leaderboard project 👋</h1>
-
-## 🤔 Problem
-How do people become good at something ? By doing it regularly, right ? That's why this project aims to help all the students in practicing programming regularly by maintaining a leaderboard. The website will be have **6 different leaderboards**
-
-## ✨ Features
-- LeaderBoard Website + Django backend to collect data from different sources( APIs and web scraping )
-- Leaderboard type 1 : Github profile activeness (based on commits/stars etc.)
-- Leaderboard type 2 : OpenLake contributions (based on commits/pull requests etc.)
-- Leaderboard type 3 : Codechef ranking
-- Leaderboard type 4 : Codeforces ranking
-- Leaderboard Type 5 : Leetcode ranking
-- Leaderboard type 6 : Leetcode contest ranking
-- Students can also view the rankings of the latest LeetCode contests, their institute rank and visualise contest performance through graph.
-- Students will get notified(through email) whenever their rank is decreasing (because they aren't active)
-- Our metrics will promote consistent work instead of bulk work at once.
-- Tech Stack : React, Django, PostgreSQL, MongoDB (for Friend's Table)
-
-## 📝 Setup instructions
-- Install `pnpm`, To obtain installation instructions for the pnpm package manager on your operating system, please refer to the following [link](https://pnpm.io/installation).
-- Install `python3.7`
-    - Ensure that you are in project folder
-    - Create a virtual Environment
-        ```
-        python3 -m venv <ENVIRONMENT_NAME>
-        ```
-    - Activate the virtual Environment
-        ```
-        source <ENVIRONMENT_NAME>/bin/activate
-        ```
-- Install `make`
-    - For Ubuntu:
-        ```
-        sudo apt update
-        sudo apt install make
-        ```
-    - For Mac OS:
-        - In the terminal window, run the command ```xcode-select --install```
-        - In the windows that pops up, click Install, and agree to the Terms of Service.
-    - For Windows, follow the [link](https://linuxhint.com/install-use-make-windows/)
-- Install Redis 
-    - For Ubuntu, follow the [link](https://redis.io/docs/install/install-redis/install-redis-on-linux/)
-    - For MacOS, follow the [link](https://redis.io/docs/install/install-redis/install-redis-on-mac-os/)
-    - For Windows, follow the [link](https://redis.io/docs/install/install-redis/install-redis-on-windows/)
-- Replace database credentials
-    - Create a new project on Supabase
-    - Go to `Project Settings > Database`
-    - Open the project in prefered code-editor
-    - Go to `Leaderboard-Pro > api > leaderboard > settings.py`, scroll down to `DATABASES` variable and change the `NAME`, `USER`, `PASSWORD`, `HOST` and `PORT` as on the Supabase Database page. 
-- Run the following commands in the same order:
+# Welcome to the Leaderboard project 👋
+
+## Problem
+People become proficient at something by practicing regularly. This project facilitates regular programming practice by maintaining a leaderboard. The website will feature 6 different leaderboards:
+
+## Features
+- LeaderBoard Website with Django backend to collect data from various sources (APIs and web scraping).
+- Leaderboard types:
+  1. Github profile activity (based on commits/stars, etc.).
+  2. OpenLake contributions (based on commits/pull requests, etc.).
+  3. Codechef ranking.
+  4. Codeforces ranking.
+  5. Leetcode ranking.
+  6. Leetcode contest ranking.
+- Students can view rankings of the latest LeetCode contests, institute rank, and visualize contest performance through graphs.
+- Notification system (via email) alerts students when their rank is decreasing due to inactivity.
+- Metrics promote consistent work over bulk work.
+- Tech Stack: React, Django, PostgreSQL, MongoDB (for Friend's Table).
+
+## Setup Instructions
+- Install `pnpm`. Refer to the [installation instructions](https://pnpm.io/installation).
+- Install `python3.7`.
+  - Navigate to the project folder.
+  - Create a virtual environment named "overflow":
     ```
-    make install
-    make dev
+    python3 -m venv overflow
     ```
-- Visit http://localhost:8000/ and http://localhost:3000/
-
-## 🐳 Running with Docker
-
-Docker provides a consistent and isolated environment for running the Leaderboard project, ensuring that it works the same way on every machine. Follow these steps to get the application up and running with Docker:
-
-### Prerequisites
-- Ensure you have Docker installed on your machine. To install Docker, follow the instructions on the [Docker website](https://docs.docker.com/get-docker/).
-
-### Building the Docker Image
-1. Clone the repository (if you haven't already):
+  - Activate the virtual environment:
     ```
-    git clone https://github.com/your-username/Leaderboard-Pro.git
-    cd Leaderboard-Pro
+    source overflow/bin/activate
     ```
-
-2. Build the Docker image:
+- Install `make`.
+  - For Ubuntu:
     ```
-    docker build -t leaderboard-pro .
+    sudo apt update
+    sudo apt install make
     ```
+  - For Mac OS: Run `xcode-select --install` in the terminal.
+  - For Windows, follow the [installation guide](https://linuxhint.com/install-use-make-windows/).
+- Install Redis. Refer to the installation guides for [Ubuntu](https://redis.io/docs/install/install-redis/install-redis-on-linux/), [MacOS](https://redis.io/docs/install/install-redis/install-redis-on-mac-os/), or [Windows](https://redis.io/docs/install/install-redis/install-redis-on-windows/).
+- Replace database credentials:
+  - Create a new project on Supabase.
+  - Update database settings in `Leaderboard-Pro > api > leaderboard > settings.py`.
+- Copy `.env.template` in the app folder and rename it to `.env`.
+- Run the following commands:
+```
+make install
+make dev
+```
+- Visit http://localhost:8000/ and http://localhost:3000/.
+
+## Running with Docker
+### Prerequisites
+- Ensure Docker is installed. Refer to the [Docker website](https://docs.docker.com/get-docker/) for instructions.
 
-   This command builds a Docker image named `leaderboard-pro` based on the instructions in the Dockerfile.
+### Building the Docker Image
+1. Clone the repository:
+```
+git clone https://github.com/your-username/Leaderboard-Pro.git
+cd Leaderboard-Pro
+```
+2. Copy `.env.template` in the app folder and rename it to `.env`.
+3. Build the Docker image:
+```
+docker build -t leaderboard-pro .
+```
 
 ### Running the Application in a Docker Container
-1. To start the application in a Docker container, run:
-    ```
-    docker run -p 8000:8000 -p 3000:3000 leaderboard-pro
-    ```
-
-   This command starts the Docker container and maps the ports so that you can access the Django backend at `http://localhost:8000/` and the React frontend at `http://localhost:3000/`.
-
-2. Visit the URLs in your web browser to interact with the application:
-    - Django Backend: [http://localhost:8000/](http://localhost:8000/)
-    - React Frontend: [http://localhost:3000/](http://localhost:3000/)
+1. Start the application in a Docker container:
+```
+docker run -p 8000:8000 -p 3000:3000 leaderboard-pro
+```
+2. Access the application:
+- Django Backend: http://localhost:8000/
+- React Frontend: http://localhost:3000/
 
 ### Stopping the Container
-- To stop the Docker container, you can press `Ctrl+C` in the terminal where the container is running. Alternatively, you can stop the container from another terminal using the `docker stop` command with the container ID.
-
+- To stop the Docker container, press `Ctrl+C` in the terminal or use `docker stop` with the container ID.
 
-## 🧑‍💻 Maintainers
+## Maintainers
 - [Gopal Ramesh Dahale](https://github.com/Gopal-Dahale)
 - [Kumar Shivendu](https://github.com/KShivendu)
 - [Aayush Krishnan](https://github.com/krishnan05)
 - [Aditya Dubey](https://github.com/Aditya062003)
 
-## 💻 Contributing Guidelines
-- Read [contributing guidelines](https://github.com/OpenLake/Leaderboard-Pro/blob/main/.github/CONTRIBUTING.md)
+## Contributing Guidelines
+- Read the [contributing guidelines](https://github.com/OpenLake/Leaderboard-Pro/blob/main/.github/CONTRIBUTING.md)
 
-## 👀 Hosted App
+## Hosted App
 [https://openlake-leaderboardpro.vercel.app](https://openlake-leaderboardpro.vercel.app)

app/.env.template

@@ -0,0 +1 @@
+REACT_APP_BACKEND_URL=http://localhost:8000/

app/package.json

@@ -3,28 +3,28 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.10.4",
-    "@emotion/styled": "^11.10.4",
-    "@material-ui/core": "^4.11.4",
-    "@material-ui/icons": "^4.11.2",
-    "@mui/icons-material": "^5.11.0",
-    "@mui/material": "^5.10.9",
-    "@nivo/core": "^0.73.0",
-    "@nivo/line": "^0.73.0",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "axios": "^1.4.0",
-    "jwt-decode": "^3.1.2",
-    "material-ui-search-bar": "^1.0.0",
-    "react": "^16.8.0",
-    "react-apexcharts": "^1.4.0",
-    "react-dom": "^17.0.2",
-    "react-icons": "^4.7.1",
-    "react-router-dom": "^5.2.0",
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@material-ui/core": "^4.12.4",
+    "@material-ui/icons": "^4.11.3",
+    "@mui/icons-material": "^5.15.6",
+    "@mui/material": "^5.15.6",
+    "@nivo/core": "^0.84.0",
+    "@nivo/line": "^0.84.0",
+    "@testing-library/jest-dom": "^6.3.0",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
+    "axios": "^1.6.7",
+    "jwt-decode": "^4.0.0",
+    "material-ui-search-bar": "^1.0.1",
+    "react": "^18.2.0",
+    "react-apexcharts": "^1.4.1",
+    "react-dom": "^18.2.0",
+    "react-icons": "^5.0.1",
+    "react-router-dom": "^6.21.3",
     "react-scripts": "^5.0.1",
-    "styled-components": "^5.3.6",
-    "web-vitals": "^1.0.1"
+    "styled-components": "^6.1.8",
+    "web-vitals": "^3.5.2"
   },
   "scripts": {
     "start": "react-scripts start",