This is an application made with the React that allows listing, adding, editing and deleting records from an Object API. a basic React CRUD for handling users.
You can visit the online page (link below) or follow the instruction to run it locally:
- Install Node and npm
- Download or git clone the project source code from https://github.com/emazack/user-manager
- Install all required npm packages by running npm install from the command line in the project root folder (where the package.json is located).
- Start the application by running npm start from the command line in the project root folder, this will launch a browser displaying the application.
This app include some pages. A basic index page where you can reach the add form and the manage page where you can have a look to the users Here you can edit or delete a record. The app is responsive and it is online on Github pages. There is a fake backend taken from https://gorest.co.in
- Project URL: Github repo
- Live Site URL: Live website The online page can give some unexpected 404 error page. The issue is that GitHub Pages doesn't support single page apps, so there is a 404 error when refreshing page. Check this out https://github.com/rafgraph/spa-github-pages
This is a project done in React. I used github as a versioning system to keep track of my progress. The project was developed entirely with the use of the English language. I started by studying the API to contact; first a GET and a POST of the data, then I decided to complete the project by inserting the DELETE and EDIT. I felt it was important to have a responsive layout and major error handling. Later I focused on bug fixes and general optimization. The structure of the project is basic and provides excellent ideas for future engineering. In the end the project is online.
- React
- Css
- Bootstrap
- Github Pages
- Axios
- Responsive layout
I find interesting the idea of optimizing the design and component structure in the future. It might be a good idea to separate functions from presentation logic by creating separate spaces for services and functions that are used from components. It might also be a good idea to limit some repetition of jsx code, by creating centralized components for adding and editing records.
https://www.browserstack.com/ https://css-tricks.com/responsive-data-tables/ https://jasonwatmore.com/ https://gorest.co.in https://codepen.io/ https://getbootstrap.com/ https://docs.github.com/en https://www.freecodecamp.org/ https://reactjs.org/docs/hooks-faq.html