Welcome to the Affinity Frontend repository! This project is part of the broader Affinity platform, focusing exclusively on frontend development. Affinity is a web application designed to connect individuals with similar intellectual levels. The platform utilizes an AI-powered chatbot for matchmaking and includes various interactive games, such as coding rounds, to match users based on their skillset. Once matched, users can engage in meaningful conversations with one another, fostering intellectual connections.
If you're interested in working on the backend of our project, please head over to the following repository Affinity Backend.
The Affinity Frontend is a React-based application designed to deliver a smooth and seamless user experience. This repository houses all the code related to the frontend portion of the Affinity project, and all contributions should be focused on this area. The frontend interacts with the backend through API calls to provide matchmaking services, games, and chat functionality for users.
- User-friendly interface
- Responsive design
- Integration with backend APIs
- Routing with React Router
- React
- React Router
- Axios
- CSS Modules
To get started with the project, follow these steps:
-
Clone the repository:
git clone https://github.com/rishyym0927/Affinity_frontend.git cd Affinity_frontend -
Install dependencies:
npm install
-
Even after running npm install, it may give an error while running that "dotenv is not defined". Simply run :
npm install dotenv
Now you can re-run the server and this time it will run without any error.
Please note that you don’t need environment variables to run the project since no environment variables are currently being used in the codebase. The project contains only the frontend code and all the data has been hardcoaded. However, the requirement to install
dotenvexists due to the boilerplate code present in thevite.config.js, which includes thedotenvconfiguration. Aside from this boilerplate setup, there is no practical need fordotenvin the project at the moment.
To run the application locally, use the following command:
npm startThis will start the development server and you can view the application in your browser at http://localhost:5173.
- public/: Contains the static files.
- src/: Contains the source code for the application.
- assets/: Contains images, fonts, and other static assets.
- components/: Contains reusable React components.
- pages/: Contains React components for different pages.
- App.js: The main App component.
- index.js: The entry point of the application.
Note: Users are informed that they have the complete right to manipulate the sample data present in sampleData.js, as it is hardcoded. Any changes made will affect only your own codebase and will not impact others.
Affinity is still under development so it lacks connectivity between its various pages hence there is no button or something kind of that can direct you to other pages. But you can access them by using a / followed by page-route.
| Page Name | Route |
|---|---|
| Landing | / |
| Login | /login |
| Register | /register |
| Room Page | /room/:roomId |
| Code Run | /coderun |
| Dashboard | /dashboard |
| Matches | /matches |
| Requests | /request |
| Queue | /queue |
| Chatbot | /chatbot |
| Denied | /denied |
We welcome contributions from the community! Please read our CONTRIBUTING.md file for detailed guidelines on how to contribute to this project.
This repository is actively participating in Hacktoberfest and GSSoC 24. We welcome contributions, but please note that only frontend-related tasks are open for contribution. Any modifications or changes to the backend will not be considered. Feel free to raise issues and start working on assigned tasks.
If you have any questions or need further assistance, feel free to open an issue or contact the maintainers.
Thank you for your contributions!