Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mahammad-mostafa/hello-react-front-end
This is the third project in the full stack capstone of the Microverse program. It is an exercise for using React & Redux as a frontend for a simple page app.
https://github.com/mahammad-mostafa/hello-react-front-end
es6-javascript eslint frontend-web gitflow-workflow jsx microverse microverse-projects microverse-students react-hooks react-redux react-router react-router-dom reactjs redux redux-thunk redux-toolkit responsive-layout stylelint webpack
Last synced: about 1 month ago
JSON representation
This is the third project in the full stack capstone of the Microverse program. It is an exercise for using React & Redux as a frontend for a simple page app.
- Host: GitHub
- URL: https://github.com/mahammad-mostafa/hello-react-front-end
- Owner: mahammad-mostafa
- License: mit
- Created: 2024-01-19T15:51:36.000Z (12 months ago)
- Default Branch: development
- Last Pushed: 2024-01-20T00:40:22.000Z (12 months ago)
- Last Synced: 2024-10-19T02:46:47.194Z (3 months ago)
- Topics: es6-javascript, eslint, frontend-web, gitflow-workflow, jsx, microverse, microverse-projects, microverse-students, react-hooks, react-redux, react-router, react-router-dom, reactjs, redux, redux-thunk, redux-toolkit, responsive-layout, stylelint, webpack
- Language: JavaScript
- Homepage:
- Size: 368 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 🏷️ Hello React Front End
This is the third project in the full stack capstone 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 repository is about a simple greeting text in a single page.
It includes the frontend section of the app where it uses `React` framework.
State management in `React` is handled using `Redux` & `Redux Toolkit`.
Remote data fetching from the backend is done with `Thunk` api.
Navigation inside the app is implemented using `React Router`.
Linters are used for `JavaScript` & `CSS` through `ESLint` & `StyleLint`.
Development follows the `GitFlow` workflow.
Backend section is located in this [repository](https://github.com/mahammad-mostafa/hello-rails-back-end).
📌 **Tech Stack:**
- Frontend language is `JavaScript`
- Frontend Framework used is `React`
- Frontend styling used is `CSS`
📌 **Key Features:**
- Single page application
- Responsive layout with all screen sizes
- Basic header & footer structure
- Button to generate random greeting
- Not found page for invalid pages
- Dark theme with minimal styling
# 🛠️ 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
```
📌 **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:
- [ ] Use some animations or transitions
- [ ] Navigation menu with additional pages
# 🤝🏻 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.
# 📝 License
This project is [MIT](LICENSE.md) licensed.