This project was bootstrapped with Create React App. It is my attempt to convert this project into TypeScript and serves as a component for my résumé.
Visit the live demo, register an account and let curiosity be your guide.
For the main purpose of demonstrating React's modern best practices, the project uses Mock Service Worker and Local Storage to emulate the backend's behavior, therefore, it won't match your expectations of a proper fullstack app.
I'm still learning TypeScript by building this project, so if you take a closer look, you'll see that I'm ignoring type checking at some of the non-critical parts of the app's functionality as well as a suppression for those cases where I have no clue of how to make TypeScript work appropriately. PRs are most welcome if you want to show me your approach to leverage TypeScript's power.
All of the tests are passed, but there are still act() warnings for some of them. I tried to fix that (and I failed, obviously).
I highly doubt that there're some underlying dependency conflicts which may have been the cause. Again, if you happen to know how to deal with it, a PR is more than welcome.
In case you want to run the app locally, make sure to have the same environment as I do to get it working properly. Please download and install these 2 softwares (if you don't have them already):
- nvm-setup.zip from its latest release
- Git
Then open up your terminal with Admin privilege and run the following commands:
nvm install 16.13.0nvm use 16.13.0node -v(the output should bev16.13.0)- Pick a folder of your choice, or create an empty folder and then
cd path-to-that-folder git clone https://github.com/HelpMe-Pls/bookshelf.gitcd bookshelf
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Run this command on a separate terminal instance after having your development mode running (with npm start) to launch the Cypress E2E test runner. It tests the user's "happy path" as follows:
- Arrive at the app and register
- Go to the discover page and search for a book
- Add that book to the reading list
- Go to the reading list and then go to the book page
- Add some notes
- Mark the book as read
- Give the book a 5 star rating
- Go to the finished books screen
- Verify the book shows up and has a 5 star rating
- Click the book to go back to it's page
- Remove it from the reading list
- Make sure the notes and rating are gone
- Go to the finished books screen and make sure that list is empty
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
To quickly learn React, check out the React documentation.
For a paid course, I highly recommend the Kent C. Dodds Epic React course.
My personal preference of a learning path to become a React Frontend developer.
Check out the notes that I had throughout the process of building this project.
My collection of React specific topics:
Pull requests are most welcome. For breaking changes suggestion, please open an issue first to discuss what you would like to change/improve.
Contact me if you need further support.