- fix cookies work for Safari browsers (cookies are rejected by the client with new Safari update, even with website tracking setting checked off)
- translate into English
- available-scripts
- registration and authorization
- about this project
- what I learned doing this project
npm run dev — runs the website in development mode
npm run build — runs the React script to create a website build for deployment
npm run eject — ejects your project from the Create React App setup
npm run lint — runs ESLint code style tests
npm run deploy — updates dependencies on the server, creates a website build and deploys it
Please feel free to register with any fake email and password, for example you can use oioi@oioi.com and a password like oioioi - it's fine.
This is my final project within Web-Development Praktikum Course. It's built usingReact with authorization, registration, open API database search. This project utilizes JWT, cookies, security and CORS and protected routes.
The website is partially a portfolio page with all of my projects done during the course, but it also allows you to browse through a movies open database, add movies to your favourites and so on️.
In this project I've extended my knowledge into how to store JWT in cookies for better security and how to set up its work between different domains.
Doing this project I also learnt a lot about methods to protect a website from Cross Site Scripting (XSS) and how to work with Cross-origin resource sharing (CORS) to set up a website work using a subdomain for an api. I also used bcryptjs library to create a hash from a password for better protection before storing in in a database. For better protection I used environment variable for storing a secret key needed to read a JWT.
In this project I learned more about writing my own custom hooks for encapsulating some shared logic of interacting with movies database. For example, I wrote a custom hook for saving data into local storage with a callback function for updating previous state, which mimics the behaviour of default React useState hook.
For api requests validation, apart from validating the incoming data using mongoose library, I also used celebrate library to validate the incoming data for every route.
In addition to learning about different types of client's storage like localStorage and sessionStorage and how to add, get or delete an item, I also learned about how to check with the server after getting a saved token, JWT in this case. This allowed me to have a better understanding of how the data is stored and retrieved, and how it can be used to authenticate and authorize users. By learning these concepts, I was able to apply them effectively to the project and ensure that the user's data is secure and protected. For this I used HOC ProtectedRoute that makes a route possible only if token check is complete and successful.
Before starting this project, I learned the concepts of identification, authentication, and authorization. I studied the differences between these fundamental concepts of security and privacy. By understanding these concepts, I was able to apply them effectively to the project. Additionally, I looked at different examples to understand how these concepts are used in real-world scenarios. All of this helped me to feel confident when working on this project.
When working with React and HOC, I learned that there are different ways to write and use them. One common convention is to use function composition to wrap a component with additional functionality. Another convention is to use the children property to pass components or elements to the wrapped component. In addition, HOC can be used to handle certain behaviors, such as authentication or data fetching, that can then be reused across multiple components. By using HOC in this way, it can help to reduce code duplication and make code more modular and reusable.
In the context of this project, I used an HOC called ProtectedRoute to ensure that certain routes were only accessible if the user had been authenticated and authorized. It allows to reuse this functionality across multiple components and ensure that the user's data is secure and protected.
♥ thanks to yandex practicum team