Project: React & Redux
Project Summary
This project is a user management application, with 2 database tables (users and addresses) where each user has one address and each address can belong to multiple users.
You can view all users, filter the results based on any of the user properties, sort them ascending or descending by clicking on the table headers, and have pagination as well. Furthermore, you can add new users/addresses, and edit or delete the existing ones.
Code on GitHub DemoTechnologies Used
Frontend
React + Redux + React-Router
Backend
JSON Server + PHP API + MySQL
Details
Redux Store, Thunks & Reducers
- A Redux store has been used for data management. With the help of action creators and “thunks”, intents are sent to the API first, and if the API call is successful, actions are dispatched to the reducers to update the store accordingly.
- If the API calls fail, an error message (toast) will be shown on the screen. The number of pending API calls are monitored, and a loading icon will be displayed on the screen while they resolve.
- The separation of concerns design principle has been respected by separating presentational and container components.
Full CRUD Operations
- Users and Addresses can be read from the API, new users can be created, existing users can be updated or deleted.
- An address cannot be removed if there is a user connected to it, and if the last user who uses a particular address is deleted, that address would be removed too.
- The user management page has the option to sort users based on the column name, and filter them based on the selected criteria. Moreover, all table information is paginated.
- Using meaningful variable and file names, and adding comments wherever necessary, this code is readable and maintainable. Moreover PropTypes are defined for all components.
The Back End
- A mock API was created with JSON Server and used during the development phase. It was later replaced with an off-the-shelf PHP API for deployment on the server. The JSON Server API has been tweaked to closely mimic the PHP API.
- GUIDs are used as the primary key for the tables, and they are auto generated for new items with the help of MySQL triggers.
- This project has been created based on the React and Redux course instructions on www.pluralsight.com and the boilerplate code has been borrowed from the course material.