lily4178993 / hello-react-front-end

The "Hello React" app is a front-end application built with React, utilizing Vite for an enhanced development experience. This app demonstrates how to fetch data from a Rails API ("Hello Rails" app) and display it. The main feature is showing a random greeting fetched from the "Hello Rails" app

README

Table of Contents

• About Project
• Built With
• Tech Stack
• Key Features
• Getting Started
  • Prerequisites
  • Setup
  • Install
• Usage
• Tests
• Author
• Future Features
• Contributing
• Show your support
• Acknowledgements
• License

About Project

The "Hello React" app is a front-end application built with React, utilizing Vite for an enhanced development experience and TailwindCSS for styling. This app demonstrates how to fetch data from a Rails API ("Hello Rails" app) and display it. The main feature is showing a random greeting fetched from the "Hello Rails" app.

Built With

• React
• Vite
• TailwindCSS

Tech Stack

• React: 18.2.0
• Vite: 5.0.8
• TailwindCSS: 3.4.1
• Jest: 29.7.0 - for running unit and integration tests.
• React Testing Library: 14.2.1 - for writing readable tests that work with actual DOM nodes.

Key Features

• Fetches a random greeting from the "Hello Rails" app.
• Stylish, responsive UI with TailwindCSS.
• Fast development experience with Vite.

Getting Started

Prerequisites

• Node.js (specify minimum version)
• npm or yarn
• Access to the "Hello Rails" app running either locally or hosted. Hello Rails App

Setup

1. Clone this repository

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

2. Install dependencies

npm install
# or
yarn install

Install

After cloning the repo and moving into the project directory, install the dependencies:

npm install
# or
yarn

Usage

Start the development server:

npm run dev
# or
yarn dev

Open http://localhost:5173/ to view it in your browser.

Ensure the "Hello Rails" app is running to fetch greetings successfully. For details on running the "Hello Rails" app, refer to its README.

Tests

This project uses Jest alongside React Testing Library to run unit and integration tests. React Testing Library offers a robust set of tools that allow for testing components in a way that simulates user interactions more closely.

Running Tests

To run the test suite, execute the following command in your terminal:

npm run test
# or
yarn test

Author

• Nelly Telli - @lily4178993

Future Features

• Implement additional API calls to the "Hello Rails" app.
• Enhance UI/UX with animations.

Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if this project helped you!

Acknowledgements

• React Documentation
• TailwindCSS Documentation
• Vite Documentation
• "Hello Rails" app for providing the API
• Microverse

License

This project is MIT licensed.

(back to top)