Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mahammad-mostafa/countries-metrics
This is the capstone project of the third module in the Microverse program. It displays information about world countries & uses React framework with redux toolkit.
https://github.com/mahammad-mostafa/countries-metrics
capstone-project create-react-app css-modules es6-javascript jest jest-snapshots jsx microverse microverse-projects microverse-students react react-hooks react-router redux redux-thunk redux-toolkit responsive-layout rest-api single-page-app unit-testing
Last synced: 20 days ago
JSON representation
This is the capstone project of the third module in the Microverse program. It displays information about world countries & uses React framework with redux toolkit.
- Host: GitHub
- URL: https://github.com/mahammad-mostafa/countries-metrics
- Owner: mahammad-mostafa
- License: mit
- Created: 2023-09-12T18:04:27.000Z (over 1 year ago)
- Default Branch: development
- Last Pushed: 2023-09-17T03:21:22.000Z (over 1 year ago)
- Last Synced: 2024-10-19T02:46:31.700Z (2 months ago)
- Topics: capstone-project, create-react-app, css-modules, es6-javascript, jest, jest-snapshots, jsx, microverse, microverse-projects, microverse-students, react, react-hooks, react-router, redux, redux-thunk, redux-toolkit, responsive-layout, rest-api, single-page-app, unit-testing
- Language: JavaScript
- Homepage: https://countries-metrics-rstm.onrender.com/
- Size: 500 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 🏷️ Countries Metrics
This is the capstone 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 displays a simple list of all world countries with some details for each countries.
Project implemented with `ReactJS` framework.
It applies `Components` and `Hooks` along with `GitFlow` workflow.
State management is implemeneted using `Redux` & `Redux Toolkit`.
External data fetching is done with `Thunk` api.
Navigation inside the app is implemented using `React Router`.
Styling inside the project is done with `CSS Modules`.
Unit testing is handles with `Jest` framework.
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 (`CSS3` / `JavaScript`) in the `.github` folder.
📌 **Live Demo:**
- See the project live from [here](https://countries-metrics-rstm.onrender.com).
- Watch a showcase of the project from [here](https://www.loom.com/share/fa94a1baa90d4f2e888c1ee90f244e6d?sid=f50ac970-62c1-49d5-aa31-76a6c4298587).
📌 **Tech Stack:**
- Framework used is `ReactJS`
- State management by `Redux Toolkit`
- Page structure is built with `JSX`
- Styling is built with `CSS3`
- Dynamic content is built with `ES6 JavaScript`
- Bundling is done with `WebPack`
- Uint testing with `Jest`
📌 **Key Features:**
- Single page app with all content loaded dynamically
- Responsive layout with all screen sizes
- Data list is persistent & fetched from remote server
- Filtering countries list by region names
- Displays individual country details
- Transition effect between routed pages
- Back navigation to main page
# 🛠️ Instructions
You can easily download or fork this repository and work on it immadiately!
📌 **Prerequisites:**
- `NodeJS` for installing & running all packages
📌 **Installation:**
- Install all dependencies with `npm`
```
npm install
```
📌 **Development:**
- For live development on `localhost:3000` run:
```
npm run start
```
📌 **Testing:**
- 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
```
# 👥 Authors
📌 **Mahammad:**
- [GitHub](https://github.com/mahammad-mostafa)
- [Twitter](https://twitter.com/mahammad_mostfa)
- [LinkedIn](https://linkedin.com/in/mahammad-mostafa)
# 🔭 Future
Some additional features I may implement in the project:
- [ ] Using `CSS` preprocessors and their relevant loaders
- [ ] Implement advanced `Hooks` features like `useMemo`
# 🤝🏻 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.
# ⭐️ Support
Like this project? Show your support by starring!
# 🙏🏻 Acknowledgements
I thank everyone at **Microverse** for guiding me through this project.
Special thanks to [Nelson Sakwa](https://www.behance.net/sakwadesignstudio) who built the reference [design](https://www.behance.net/gallery/31579789/Ballhead-App-(Free-PSDs)).
# 📝 License
This project is [MIT](LICENSE.md) licensed.