Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mahammad-mostafa/redux-thunk-exercise

This is the fifth project in the third module of Microverse program. It is an exercise for implementing async code using Thunks with Redux toolkit in a React app.
https://github.com/mahammad-mostafa/redux-thunk-exercise

create-react-app css-modules es6-javascript jsx microverse microverse-projects microverse-students react react-hooks redux redux-thunk redux-toolkit rest-api single-page-app

Last synced: 18 days ago
JSON representation

This is the fifth project in the third module of Microverse program. It is an exercise for implementing async code using Thunks with Redux toolkit in a React app.

Awesome Lists containing this project

README

        

# 🏷️ Redux Thunk Exercise

This is the fifth project of the third module in the **Microverse** program.


Check the below contents for further details about this project.

# 📗 Contents

- [Description](#description)
- [Instructions](#instructions)
- [Authors](#authors)
- [Future](#future)
- [Contributions](#contributions)
- [Support](#support)
- [Acknowledgements](#acknowledgements)
- [License](#license)

# 📖 Description

This project is an exercise for implementing `Thunks` in `Redux Toolkit` with `ReactJS` framework.
It applies `Redux` concepts like (`store` / `actions` / `reducers`).
All project dynamic files are contained in `src` directory while static assets are in `public` directory.
The live build is generated inside the `build` directory.
Also config linters for (`CSS` / `JavaScript`) in the `.github` folder.

📌 **Live Demo:**
- See the project live from [here](https://users-list-1at2.onrender.com).

📌 **Tech Stack:**
- Framework used is `ReactJS`
- State management by `Redux Toolkit`
- Page structure is built with `JSX`
- Styling is built with `CSS Modules`
- Dynamic content is built with `ES6 JavaScript`
- Bundling is done with `WebPack`

📌 **Key Features:**
- Single page app with all content loaded dynamically
- Responsive layout with all screen sizes
- Live data fetching from an external api

back to top

# 🛠️ Instructions

You can easily download or fork this repository and work on it immadiately!

📌 **Prerequisites:**
- `NodeJS` for installing & running all packages

📌 **Setup:**
- Install all dependencies with `npm`
```
npm install
```
- For live development on `localhost:3000` run:
```
npm run start
```
- Unit testing is done with:
```
npm run test
```

📌 **Deployment:**
- You can deploy this project by uploading files in the `build` folder to a live server.
- Create the distribution build using this command:
```
npm run build
```

back to top

# 👥 Authors

📌 **Mahammad:**
- [GitHub](https://github.com/mahammad-mostafa)
- [Twitter](https://twitter.com/mahammad_mostfa)
- [LinkedIn](https://linkedin.com/in/mahammad-mostafa)

back to top

# 🔭 Future

Some additional features I may implement in the project:
- [ ] Using `CSS` preprocessors and their relevant loaders
- [ ] Implement advanced `Hooks` features like `useMemo`

back to top

# 🤝🏻 Contributions

Wish to contribute to this project?


Contributions, issues, and feature requests are more than welcome!


Feel free to check the [issues](../../issues) page too.

back to top

# ⭐️ Support

Like this project? Show your support by starring!

back to top

# 🙏🏻 Acknowledgements

I thank everyone at **Microverse** for guiding me through this project.

back to top

# 📝 License

This project is [MIT](LICENSE.md) licensed.

back to top