hafiz1379/hello-react-front-end

This is a front end with react and redux, to test the rails backend point to practice connecting react and rails.

Hello React Front-End

📗 Table of Contents

• 📗 Table of Contents
• 📖 Hello React Front-End
  • 🛠 Project Requirements
  • 🚀 Getting Started
    • 💻 API Endpoints
    • Prerequisites
    • Setup
    • Run the Project
  • 👥 Author
  • 🔭 Issues
  • 🤝 Contributing
  • ⭐️ Show Your Support
  • 📝 License

Key Features

• Using the ReactJS library
• Using the ReactJS Router library
• Using JSX syntax
• SPA Approach
• Using Redux Toolkit for a global state management
• Fetch API

(back to top)

---

📖 Hello React Front-End

Hello React Front-End is a React application that displays random greetings fetched from the Rails API endpoint. This project meets the following requirements:

🛠 Project Requirements

• Create a React app called 'hello-react-front-end'.
• Initialize the project with Git.
• Create the App component with react-router.
• Create the Greeting component that displays a greeting and set it up as a route in the App component.
• Create a store, an action, and a reducer that connect to your API endpoint to get the random greeting.
• Display the random greeting in your Greeting component.

🚀 Getting Started

To get the project up and running on your local machine, follow these steps.

🔗 Integration with Hello Rails Back-End

This front-end application is designed to work in conjunction with the Hello Rails Back-End project. The back-end project provides a server API, and this front-end application makes requests to http://localhost:3000/api/v2/greetings/random to fetch random greetings. Ensure that the back-end server is running before using this front-end application.

(back to top)

Prerequisites

Before you begin, make sure you have the following prerequisites installed on your system:

• Node.js: You need Node.js to run the React application.
• npm: npm is the package manager for JavaScript and comes with Node.js.

Setup

Clone this repository to your desired folder:

git clone https://github.com/hafiz1379/hello-react-front-end.git
cd hello-react-front-end

Install dependencies:

npm install

Run the Project

To run the project, execute the following command:

npm start

(back to top)

👥 Author

👤 Hafizullah Rasa

• GitHub: Hafiz Rasa
• LinkedIn: Hafiz Rasa

(back to top)

🔭 Future Features

• Create the view: All Greetings list
• Add custom CSS styles to the UI
• Deploy the final version of the project and share Link Demo in the documentation
• Create Unit tests using Jest and React testing library

(back to top)

🔭 Issues

Find a bug or have a feature request? Open a new issue here on GitHub.

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

(back to top)

⭐️ Show Your Support

If you find this project helpful, please consider starring the repository. Your support is greatly appreciated!

(back to top)

📝 License

This project is licensed under the MIT License - see the LICENSE.md file for details.

(back to top)