https://github.com/nkosi-tauro/wysprapp
Simple React application that fetches mock data from jsonplaceholder
https://github.com/nkosi-tauro/wysprapp
reactjs tailwindcss typrescript
Last synced: 2 months ago
JSON representation
Simple React application that fetches mock data from jsonplaceholder
- Host: GitHub
- URL: https://github.com/nkosi-tauro/wysprapp
- Owner: nkosi-tauro
- License: mit
- Created: 2023-09-07T14:16:58.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-09-07T20:54:47.000Z (over 1 year ago)
- Last Synced: 2025-01-25T12:41:48.802Z (4 months ago)
- Topics: reactjs, tailwindcss, typrescript
- Language: TypeScript
- Homepage: https://wyspr-app.vercel.app/
- Size: 53.7 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Wysprapp
About |
Technologies |
Requirements |
Starting |
License |
Author
## :dart: About ##
Simple React application that fetches mock data from [jsonplaceholder](https://jsonplaceholder.typicode.com/).
I kept the application quite rudimentary
### Observations
- React Context.
- For the Authentication I have gone with a simple implementation that requires no route checking. If I were to implement this, I think having/creating a custom Auth context to keep track of the login/out states would be much beneficial
- Caching.
- This app could benefit from further improvements to data fetching. At the moment, I implemented pagination to prevent slow loading due to the amount of items(5000) its was fetching and trying to display at once. This solves the issue in our case but if we needed to scale, a cache would come in handy.
### Limitation(s)
- 1 user at a time
- Due to the way the simple authentication system is working, only 1 user can be created at a time.
- Use the delete account button once logged in to delete the user
## :rocket: Technologies ##
The following tools were used in this project:
- [React](https://react.dev/)
- [TypeScript](https://www.typescriptlang.org/)
- [Tailwind CSS](https://tailwindcss.com/)
## :white_check_mark: Requirements ##
Before starting :checkered_flag:, you need to have [Git](https://git-scm.com) and [Node](https://nodejs.org/en/) installed.
## :checkered_flag: Starting ##
```bash
# Clone this project
$ git clone https://github.com/nkosi-tauro/wysprapp
# Access
$ cd wysprapp
# Install dependencies
$ yarn
# Run the project
$ yarn dev
# The server will initialize in the
```
## :memo: License ##
This project is under license from MIT. For more details, see the [LICENSE](LICENSE) file.
Made with :heart: by Nkosilathi Tauro