📔 بالعربي 📔
backend-end part from here
- Introduction
- Model and diagram
- Installation
- Development setup
- Project structure
- Features
- Packages
- License
WeWork is an open source freelancing platform , where is consist of two parts , first part is Backend and the other part is Frontend which you are reading now . In this part we gonna design different pages like landing page , job list , job details and more .
As we create authentication system at Backend , here in Frontend we also going to implement authentication to protect some routes and provide authorization for users .
In this project three different accounts going to use it , first visitor , second employer and lastly freelancer . Visitor has limited route can visit which only public routes , where employer and freelancer there share some routes + there own protected routes .
First scenario for freelancer to get employed
Employers can publish there own jobs , then freelancer can provides there proposals , employers can accept or decline the proposals , once proposal is accepted one recruiting request gonna be send to freelancer , if both side accept the request the job goona be closed ; also the employer can send request to specific freelancer direclty without waiting for proposal.
Second senario for freelancer to get employed
Employers after they publish there jobs they can send hiring request to specifc freelancer , if the freelancer is accept that request , them freelancer can submit the product , and lastly the employer can rate freelancer work.
- On GitHub.com, navigate to the main page of the repository.
- Above the list of files, click Code.
- Copy the URL for the repository.
- Open Terminal.
- Change the current working directory to the location where you want the cloned directory.
- Type git clone, and then paste the URL you copied earlier.
git clone github.com/Faris-abukhader/we-work
Press Enter to create your local clone
git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
> Cloning into `we-work`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.
To set up this project you need to download NodeJs in your machine or if you have it make sure you have the latest version of it.
node -v
for Windows
Download the windows installer from NodeJs offical website make sure you have download the latest version of NodeJs.
for Mac
- You can download NodeJs using brew CLI
brew install node
- You can download NodeJs mac version through the offical website
Go to project direct where <package.json> is exist and type in terminal :
npm install
To run the project just type down in terminal :
npm run dev
📦we-work
┣ 📂components
┃ ┣ 📂auth
┃ ┃ ┗ 📜AccountTypeCard.js
┃ ┣ 📂dashboard
┃ ┃ ┣ 📂allWorks
┃ ┃ ┃ ┣ 📜...
┃ ┃ ┃ ┣ 📜allWorks.js
┃ ┃ ┣ 📂employerHiringRequest
┃ ┃ ┃ ┣ 📜...
┃ ┃ ┃ ┣ 📜employerHiringRequest.js
┃ ┃ ┣ 📂freelancerHiringRequest
┃ ┃ ┃ ┣ 📜...
┃ ┃ ┃ ┣ 📜freelancerHiringRequest.js
┃ ┃ ┣ 📂freelancerProducts
┃ ┃ ┃ ┣ 📜...
┃ ┃ ┃ ┣ 📜freelancerProducts.js
┃ ┃ ┣ 📂freelancerProposals
┃ ┃ ┃ ┣ 📜...
┃ ┃ ┃ ┣ 📜freelancerProposals.js
┃ ┃ ┣ 📂profile
┃ ┃ ┃ ┣ 📜...
┃ ┃ ┃ ┣ 📜profile.js
┃ ┃ ┣ 📜SubNav.js
┃ ┃ ┗ 📜WelcomingBanner.js
┃ ┣ 📂general
┃ ┃ ┃ ┣ 📜...
┃ ┃ ┃ ┣ 📜general.js
┃ ┣ 📂jobDetails
┃ ┃ ┃ ┣ 📜...
┃ ┃ ┃ ┣ 📜jobDetails.js
┃ ┣ 📂jobList
┃ ┃ ┃ ┣ 📜...
┃ ┃ ┃ ┣ 📜jobList.js
┃ ┣ 📂landingPage
┃ ┃ ┃ ┣ 📜...
┃ ┃ ┃ ┣ 📜landingPage.js
┃ ┣ 📂layout
┃ ┃ ┣ 📂components
┃ ┃ ┃ ┣ 📜Footer.js
┃ ┃ ┃ ┣ 📜FooterSection.js
┃ ┃ ┃ ┣ 📜Navbar.js
┃ ┃ ┃ ┣ 📜NewsLetter.js
┃ ┃ ┃ ┗ 📜Offcanva.js
┃ ┃ ┣ 📜Layout.js
┃ ┃ ┗ 📜UserLayout.js
┃ ┗ 📂userProfile
┣ 📂pages
┃ ┣ 📂api
┃ ┃ ┣ 📂auth
┃ ┃ ┃ ┗ 📜[...nextauth].js
┃ ┃ ┗ 📜hello.js
┃ ┣ 📂auth
┃ ┃ ┣ 📜signIn.js
┃ ┃ ┗ 📜signUp.js
┃ ┣ 📂dashboard
┃ ┃ ┣ 📂allWorks
┃ ┃ ┃ ┗ 📜index.js
┃ ┃ ┣ 📂employer-hired-history
┃ ┃ ┃ ┗ 📜index.js
┃ ┃ ┣ 📂freelancer-all-works
┃ ┃ ┃ ┗ 📜index.js
┃ ┃ ┣ 📂freelancer-hired-history
┃ ┃ ┃ ┗ 📜index.js
┃ ┃ ┣ 📂freelancer-proposals
┃ ┃ ┃ ┗ 📜index.js
┃ ┃ ┣ 📂profile
┃ ┃ ┃ ┗ 📜index.js
┃ ┃ ┗ 📜index.js
┃ ┣ 📂freelancer-profile
┃ ┃ ┗ 📜index.js
┃ ┣ 📂jobDetails
┃ ┃ ┗ 📜index.js
┃ ┣ 📂jobList
┃ ┃ ┗ 📜index.js
┃ ┣ 📂profile
┃ ┃ ┗ 📜index.js
┃ ┣ 📜_app.js
┃ ┗ 📜index.js
┣ 📂public
┃ ┣ 📂...
┣ 📂store
┃ ┣ 📂slices
┃ ┃ ┣ 📜certification.js
┃ ┃ ┣ 📜education.js
┃ ┃ ┣ 📜employmentHistory.js
┃ ┃ ┣ 📜hiringRequest.js
┃ ┃ ┣ 📜item.js
┃ ┃ ┣ 📜job.js
┃ ┃ ┣ 📜language.js
┃ ┃ ┣ 📜product.js
┃ ┃ ┗ 📜proposal.js
┃ ┗ 📜store.js
┣ 📂styles
┃ ┣ 📜Home.module.css
┃ ┣ 📜Wave.module.css
┃ ┗ 📜globals.css
┣ 📂utils
┃ ┣ 📜citiesList.js
┃ ┣ 📜dashboardPages.js
┃ ┣ 📜emailValidation.js
┃ ┣ 📜fireNotification.js
┃ ┣ 📜footerSections.js
┃ ┣ 📜hourPerWeek.js
┃ ┣ 📜industries.js
┃ ┣ 📜jobCategories.js
┃ ┣ 📜jobFinishingTimeOptions.js
┃ ┣ 📜languageLevels.js
┃ ┣ 📜languagesList.js
┃ ┣ 📜popularKey.js
┃ ┣ 📜salaryRange.js
┃ ┗ 📜utils.js
┣ 📜.DS_Store
┣ 📜.env.local
┣ 📜.eslintrc.json
┣ 📜.gitignore
┣ 📜README.md
┣ 📜next.config.js
┣ 📜package-lock.json
┣ 📜package.json
┣ 📜postcss.config.js
┗ 📜tailwind.config.js
- Authentications , authorizations are all implemented with differents layers.
- Full state management implementation using redux toolkit.
- Implementing google map for employer company location.
- 24 reusable componenets , check components -> general folder
- Whole project pages is full responsive.
- Two Custom layout
| Name | Description |
|---|---|
@lottiefiles/react-lottie-player |
This is a React component for the Lottie Web Player |
@reduxjs/toolkit |
Simple. Includes utilities to simplify common use cases like store setup, creating reducers, immutable update logic, and more |
next-redux-wrapper |
A HOC that brings Next.js and Redux together |
animate.css |
Animate.css is a library of ready-to-use, cross-browser animations |
sweetalert2 |
A beautiful, responsive, customizable, accessible for JavaScript's popup boxes. |
next-auth |
is a complete open source authentication solution for Next.js applications. |
react-rating |
react rating component. |
google-map-react |
is a component written over a small set of the Google Maps API |
tailwindcss |
A utility-first CSS framework for rapidly building custom user interfaces. |