This repo contains final project requirements and template for GridU React course. You should fork it and complete the task in the forked repository.
We're building "Another Twitter Clone" app that resembles basic functionality of, you guessed it, Twitter. App contains the total of 3 pages (see mockups for visual guidelines):
-
Login - allows user to enter email and password (both required), validates them on UI (see validation rules), sends request to login endpoint (see mock server docs) on form submition and redirects to tweets page if the response code is 200. Shows "Invalid email or password" message if the response code is 404. Shows "Something went wrong" message for other error codes.
-
Signup - allows user to enter email, password and full name (all required), validates them on UI (see validation rules), sends request to signup endpoint (see mock server docs) on form submition and redirects to tweets page if the response code is 200. Shows "Something went wrong" message for error response codes.
-
Tweets - fetches tweets (see mock server docs) and displays them in a list. Also allows user to create a tweet by typing it into the text input (see validation rules) and clicking "Tweet", after that app should consequently 1) send request to create tweet (see mock server docs) and 2) refectch tweets list.
See PDF and Figma files in this repo. Please note that these mockups are just visual guidelines, not final designs. You're encouraged to apply creativity, use color pallete and UI elements of your choice (components library usage recommended to save time, but not required).
If the input is touched and invalid it should be highlighted red and display "Invalid ..." message.
Pretty complex syntax, we recommend to use validation library
Minimum length 8 symbols, maximum length 256 symbols.
Minimum 1 symbol, maximum 512 symbols.
Minimum 1 symbol, maximum 140 symbols (we're cloning old-school Twitter here). Tweet text also supports HTML markdown - if user puts <strong>LOL</strong> it should be rendered as bold text in the tweet later (look out for injection attacks here, sanitization needed).
There's React app template inside twitter-clone directory (created using create-react-app). That's where your work will happen, just fork this repo and change the contents of this directory as you wish. README.md there has all the needed instructions.
There's db.json file in repo root. Feed it into JSON Server to GET your mock API. Make sure to check documentation to know how to get and update your data.
The command to do it (port is specified to avoid conflict with React app):
json-server --watch db.json --port 3001For the sake of simplicity login-signup process is severely simplified.
⚠️ Mock server stores passwords as plain text: Don't enter any sensitive data while testing. Never store passwords as plain text in real applications.
In order to log user in you need to try getting them by username (like http://localhost:3000/users/johnsmith), if you got 200 and user - login successfull, if 404 - username or password wrong.
In order to sign user up just POST the form contents to http://localhost:3000/users, 200 response means signup was succesfull and user is authenticated now.
You can store logged in user data in localStorage for simplicity.
In case you get stuck or have questions/suggestions for this repo feel free to create GitHub issue or reach people from "Professors" field in GridU React course.