Welcome to the Affinity Frontend Repository! This project is part of the larger Affinity platform, focused specifically on frontend development. Affinity is a web application designed to connect individuals with similar intellectual levels. The platform leverages an AI-powered chatbot for matchmaking and features various interactive games, such as coding challenges, to match users based on their skill sets. Once matched, users can engage in meaningful conversations, fostering deep intellectual connections.
If you're interested in contributing to the backend of the project, please visit our Affinity Backend Repository.
Introduction
Features
Preview
Technologies Used
Installatiom
Usage
Contibutors
Contibuting
Contact
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.
Note
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 dotenv exists due to the boilerplate code present in the vite.config.js, which includes the dotenv configuration. Aside from this boilerplate setup, there is no practical need for dotenv in 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.jsx: The main App component.
- main.jsx: The entry point of the application.
Tip
Users are informed that they have full control over the sample data present in sampleData.js, as it is hardcoded. Any modifications made will only affect your local codebase and will not impact other users.
Affinity is currently under development, so navigation between pages is not yet fully implemented. As a result, there are no buttons or links to direct you to other sections of the platform. However, you can access different pages manually by appending the / followed by respective page-route to the base URL.
| 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!