QuickHire is like an online marketplace where people can offer their skills and services for others to hire or buy. Building an app or a website or even helping a person in developing something for your needs, QuickHire is the ideal platform for everyone.
- Date Created: 29 Jan 2024
- Last Modification Date: Apr 9, 2024
- Frontend Deployed URL: https://quick-hire.netlify.app/
- Backend Deployed URL: https://quickhire-backend-1.onrender.com/
- Group Gitlab URL: https://git.cs.dal.ca/gupta2/csci_5709_grp-04/
Note: Please give 50 seconds to 2 minutes to UI for loading data. As backend is hosted on Render as free tier, and it will take sometime to start.
- Hiteshkumar Gupta - (Frontend, Backend Developer)
- Rahul Hambarde - (Frontend, Backend Developer)
- Parth Pinakin Modi - (Frontend, Backend Developer)
- Angel Christian - (Frontend, Backend Developer)
- Tijilkumar Parmar - (Frontend, Backend Developer)
- Yashkumar Khorja - (Frontend, Backend Developer)
- Features
- Project Structure
- Getting Started - Frontend
- Getting Started - Backend
- Acknowledgments
- References
- Product Wishlist Page
- Search Result Page
- Services List
- Sort options
- Individual Service Page
- Service Details
- Add to Wishlist
- Send Message
- Feedback and Rating System
- Both ways
- User Management
- Login Page
- Sign up page
- User Profile Page
- Reviews as well
- Payment Gateway for Service
- Payment Processing on the individual service screen
- Become A Seller Setup
- Multiple pages, similar to Fiverr
- Service Creation Page for Seller
- Wishlist for the User, My Services for the Seller
- View
- Edit
- Disable
- Subcategory Service Page
- When clicked on a broader category
- Orders Page
- QuickHire's SEO improve for search engine visibility.
- Included a robots.txt file to control search engine bot access to the site.
- Added a sitemap.xml file to aid search engine crawling and indexing.
In our frontend implementation, we have adopted a feature-based organization structure:
- Features Folder: Contains subfolders for each feature of the application.
- Within each feature folder:
- Components: Individual components related to that feature.
- CSS Files: Each component has its own CSS file, allowing for easier management of styles.
- Within each feature folder:
In this project, we have structured our backend using the following folders:
- Controller: Contains the controller files responsible for handling incoming requests and returning appropriate responses.
- Middleware: Houses middleware functions used for request preprocessing, authentication, etc.
- Models: Contains the data models used in the application.
- Routes: Defines the API routes and connects them to the appropriate controller functions.
To have a local copy of this lab up and running on your local machine, you will first need to install the following libraries and tools:
git
node: v14.21.3
npm: v6.14.18
react: ^17.0.1
To have a local copy of this assingnment up and running on your local machine, you will first need to install the following software:
Download Install node from node website
Website: https://nodejs.org/en/download
A step by step series of examples that tell you how to get a development env running
Clone repository
git clone https://git.cs.dal.ca/gupta2/csci_5709_grp-04.git
Change directory to app
cd csci_5709_grp-04
cd Frontend
cd quickhire
Install packages
npm i
Create .env file add following credentials
REACT_APP_BACKEND_URL=https://quickhire-backend-1.onrender.com/api/v1/
REACT_APP_FIREBASE_API = AIzaSyAeyFuIDm34sjFU0_yGgMTJmpyJTCmoE5k
Run Project
npm start
Navigate to http://localhost:3000/
. The application will automatically reload if you change any of the source files.
To deploy on ubuntu server, follow this steps: Clone repository
git clone https://git.cs.dal.ca/gupta2/csci_5709_grp-04.git
Change directory to app
cd csci_5709_grp-04
cd Frontend
cd quickhire
Install packages
npm i
Create .env file add following credentia;s
REACT_APP_BACKEND_URL=https://quickhire-backend-1.onrender.com/api/v1/
REACT_APP_FIREBASE_API = AIzaSyAeyFuIDm34sjFU0_yGgMTJmpyJTCmoE5k
Build Project
npm run build
This will regenerate build folder which will contains index.html.
Point nginx
server to this location.
Your server will be up and running.
- React - The web library used
- Material UI - Styling library
- FlatIcon - For icons
- Stripe - Online payment processing platform
To have a local copy of this lab up and running on your local machine, you will first need to install the following libraries and tools:
git
node: v14.21.3
npm: v6.14.18
To have a local copy of this assingnment up and running on your local machine, you will first need to install the following software:
Download Install node from node website
Website: https://nodejs.org/en/download
A step by step series of examples that tell you how to get a development env running
Clone repository
git clone https://git.cs.dal.ca/gupta2/csci_5709_grp-04.git
Change directory to app
cd csci_5709_grp-04
cd Backend
Create .env file add following credentia;s
PORT=4000
CORS_ORIGIN=*
MONGODB_URI=mongodb+srv://servicequickhire:QuickHire24@quickhire.fimqbyx.mongodb.net/quickhire?retryWrites=true&w=majority
SECRET_KEY=secret
USER=service.quickhire@gmail.com
PASS=evuu omfs gucw mhal
Install packages
npm i
Run Project
npm run dev
Navigate to http://localhost:4000/
. The application will automatically reload if you change any of the source files.
To deploy on ubuntu server, follow this steps: Clone repository
git clone https://git.cs.dal.ca/gupta2/csci_5709_grp-04.git
Change directory to app
cd csci_5709_grp-04
cd Backend
Install packages
npm i
Create .env file add following credentia;s
PORT=4000
CORS_ORIGIN=*
MONGODB_URI=mongodb+srv://servicequickhire:QuickHire24@quickhire.fimqbyx.mongodb.net/quickhire?retryWrites=true&w=majority
SECRET_KEY=secret
USER=service.quickhire@gmail.com
PASS=evuu omfs gucw mhal
Build Project
npm run build
This will regenerate build folder which will contains index.html.
Point nginx
server to this location.
Your server will be up and running.
- Node.js - JavaScript runtime
- Express.js - Web application framework for Node.js
- MongoDB - NoSQL database
- Design is inspired by Fiverr and Upwork.
- Created React application using template create-react-app
- Used Material-UI components and icons
- Used react-multi-carousel's to create smooth carousel for displaying Popular Services component
- Used react-parallax for animation of Hero section for Landing page
- Used typewriter-effect to animate text
- Render - For Backend hosting
- Hats off to the Medium.com and Stackoverflow.com community for providing useful tutorials and solutions