In this project, we will build a Fiverr clone using the MERN stack (MongoDB, Express.js, React.js, Node.js) and GraphQL. Fiverr is a popular online marketplace connecting freelancers and clients. By creating this clone, we will gain hands-on experience with backend and frontend development using the MERN stack, while leveraging GraphQL for efficient data retrieval and manipulation.
Progressive web applications (PWAs) are web applications with practical improvements that allow them to work like desktop or mobile apps. PWAs offer features such as offline functionality, an app-like interface, push notifications, and the ability to be installed on the user's device.
- Sign up as a freelancer or a client
- Create and manage your profile
- Browse and search for services
- Place orders
- Message and communicate with freelancers
- Leave reviews and ratings
- Offline functionality for uninterrupted usage
- Install the application on your device for quick access
To run this project locally, follow these steps:
-
Clone the repository:
git clone https://github.com/S2-Projects/clone-fiverr
-
Change to the project's directory:
cd clone-fiverr
-
Install the dependencies for both the frontend and backend:
cd frontend && npm install cd ../backend && npm install
-
Configure the environment variables:
- Create a .env file in the server directory.
- Set the required environment variables, such as database connection URL and API keys. Refer to the .env.example file for the necessary variables.
-
Start the development server:
cd ../frontend && npm start cd ../backend && npm run dev
-
Open your web browser and visit http://localhost:3000 to see the application running.
- Visit the homepage and sign up as either a freelancer or a client.
- Create your profile, providing relevant information and skills.
- Browse available services, use the search functionality to find specific services, and filter the results.
- Click on a service to view its details, including the freelancer's profile and pricing.
- Place an order for a service
- Communicate with freelancers through the messaging system to discuss the project.
- Upon completion, leave a review and rating for the freelancer.
In the conception phase, we identified the main entities and their relationships within the .Bricolli application. The class diagram below illustrates the core classes and their associations.
We welcome contributions to enhance the features and functionality of this .Bricolli project. If you'd like to contribute, please follow these steps:
- Fork the repository.
- Create a new branch for your feature or bug fix.
- Make the necessary changes and commit them.
- Push your changes to your fork.
- Submit a pull request detailing your changes.
This project is licensed under the MIT License.
We would like to acknowledge the following resources and libraries that helped us build this project:
- MERN Stack
- GraphQL
- React
- Node.js
- Express.js
This project was collaboratively developed by Boudenjal Mohcine and El Ouahabi Hind. We worked together to implement various features and ensure the smooth functioning of Bricolli application.
This project was oriented by Lotfi ELAACHAK, a professor at FST Tangier.