Fullstack Project – React, MySQL, Node.js, Socket.io,
A system for marking vacations; like and dislike, follow and unfollow
Every user who enters the website, will be able to tag the vacation with "follow", every vacation that is tagged by the user and goes through a change by the admin of the website, will change in real-time (using socket.io) for the user in the page in which he follows..
1. Server side = Nodejs, express api
2. Client side = React.js
The project needs to be done on localhost (no need for hosting)
HTML + CSS
– HTML5 Structure
– Bootstrap design (optional)
– React -saga / thunk / middleware
– Container components / service component / router etc..
– Using express
– Restfull App
– Socket io
– Design & create schema
Entities on the system:
1. User: ID, first name, last name, user name, password
2. Admin: only one user in the system
3. Vacation: ID, Description, Destintatiion, Picture, Dates (when to when), price, number of followers
Permissions in the system
1. Admin – responsible for the maintenance of the system, change vacations, add and delete vacations
2. User – login, sign-up, monitor vacations, follow and unfollow
If the user is not logged-in, he’ll be transferred to the login page.
In the login page, they’ll be 2 options: login or register
1. all fields are mandatory
2. check that the user doesn’t exist already
Main Page – Vacations
1. in this page, the vacations will be displayed in the following order: vacations that the user follows and after that vacations that the user doesn’t follow.
2. every vacation that the user follows will change in real-time when the admin changes any information on the page.
3. the information will change on the user’s page without refreshing the page (by using socket.io)
Main Admin Page
1. Available for the admin only, cannot do follow, can only do: add, delete, edit
2. for adding: the button "add vacation" at the top part of the screen, by clicking the button a modal will open or transition to the component that displays adding vacation, after saving a vacation, the admin can see the vacation in the main page and the all the users in the system.
3. for adding and deleting, icons of pencil and x (see image in the document, page 5/6)
4. admin page – reports
Admin Page – Reports
1. In this page, you need to choose a library for graphs; for example, chartjs or victory, but can be whatever you want.
2. x axis – IDs of only followed vacations.
3. y axis – number of followers per vacation (see example image on the document, page 6/6)
Project – Files
Delete node_modules from backend and frontend
Zip the main folder
*At least 5 vacations
Posted On: January 15, 2022 18:05 UTC
Category: Full Stack Development
Skills:HTML, Redux, Bootstrap, React, MySQL, Node.js, CSS, Socket.io
click to apply
All jobs | upwork.com