This is a simple MERN stack project which display all npa teams and details about each team and its members.
This project was made as a task on ITI scholarship, Frontend & Cross-Platform Mobile App development track.
you can view the live version from here.
-
Frontend Side is built with: ReactJS, Semantic UI library.
- deployed on Netlify
-
Backend Side is implemented using: Node.js, Express
- deployed on Repl.it, you can view here.
-
Database is implemented using MongoDB.
-
Perquisites install node.js and npm
-
Run the dev server for react project:
-
open terminal into npateams folder
-
run
npm install
to install all dependencies.a -
run
npm start
to start dev server on http://localhost:3000/ -
backend is already running on here
all endpoints require no Authentication. This API is implemented using Node.js and Express. The database that is implemented on MonogDB has 4 collections:
1- home collection: - it has the units that's rendered in home page, included 3 objects:
1- slider: which contains the covers of home page top slider.
2- blocks: which contains the images of the highlights section.
3- poll: which contains the teams that is included into the poll for the poll section.
- this collection has 3 methods:
- get all home objects: `/api/home`
- Post a new home item into any of three objects: `/api/home`
- update/patch any of three objects by id: `/api/home/:id`
2- Subscription collection: - All emails that are registered for subscription are stored into it.
- this collection has 2 methods:
- get all emails that are registered: `/api/subscriptions`.
- post a new email: `/api/subscription'
3- Logos collection: - This is where a logo for a new added team is stored.
- this collection has 2 methods:
- get a logo of a team by a team name: `/api/logos/:teamName`
- post a new logo for a team: `/api/logos/upload`
- delete a logo of a team by a team name: `api/logos/:teamName`
4- Teams collections: - This collection contains all teams that are rendered on teams page and the details and members of each team which are rendered on every team page.
- This collection has 5 methods:
- get all teams: `/api/teams`
- get a team by id: `/api/teams/:id`
- post a new team: `/api/teams`
- update/patch a team: `api/teams/:id`
- delete a team: `api/teams/:id`