https://github.com/mayzamendesrodrigues/web_project_around_react
This project was created to develop React skills, serving as a practical case study for migrating an application built with plain JavaScript to the React. The goal is to transform a functional and interactive website into a modern, component-based application, using Vite as the build tool.
https://github.com/mayzamendesrodrigues/web_project_around_react
babel react vite
Last synced: about 2 months ago
JSON representation
This project was created to develop React skills, serving as a practical case study for migrating an application built with plain JavaScript to the React. The goal is to transform a functional and interactive website into a modern, component-based application, using Vite as the build tool.
- Host: GitHub
- URL: https://github.com/mayzamendesrodrigues/web_project_around_react
- Owner: MayzaMendesRodrigues
- Created: 2025-08-16T19:49:11.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-08-31T19:53:00.000Z (10 months ago)
- Last Synced: 2025-10-09T07:51:09.101Z (9 months ago)
- Topics: babel, react, vite
- Language: JavaScript
- Homepage:
- Size: 876 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🇺🇸 USA Around in React
---
## 📌 Project Overview
This project was created with the main goal of developing React skills, serving as a practical case study for the migration of an application built with pure JavaScript to the React framework.
The focus is to convert a functional and interactive website into a modern, component-based application, using Vite as the build tool and preparing integration with external APIs.
---
## 🎯 Key Learning Goals
* Set up a React project with Vite.
* Refactor HTML into JSX.
* Develop and structure reusable React components.
* Manage data flow with `props` and `children`.
* Organize the folder structure for scalability.
* Integrate with external APIs using `fetch` .
---
## 🛠 Tech Stack
* **React** – UI library.
* **Vite** – Lightning-fast build tool.
* **JSX** – Syntax extension for JavaScript.
* **CSS** – Styling (migrated from previous project).
* **REST API** – Dynamic data integration.
---
## ⚙️ Setup Instructions
1. Clone the repository:
```bash
git clone git@github.com:MayzaMendesRodrigues/web_project_around_react.git
cd web_project_around_react
```
2. Create the React project with Vite:
```bash
npm create vite@latest .
# Select: React → JavaScript
```
3. Install dependencies:
```bash
npm i
```
4. Configure scripts in **`package.json`** and server port in **`vite.config.js`** (default: 3000).
---
## 🌐 API Integration
The application fetches and renders **dynamic content** through REST API requests.
Data can be consumed using either **fetch** or **axios**, centralized under `src/services/` for clean architecture.
---
## 🚀 Next Steps
* [ ] Migrate to **TypeScript** for static typing.
* [ ] Add **unit and integration tests** (Jest + Testing Library).
* [ ] Implement **global state management** (Context API or Zustand).
* [ ] Set up **CI/CD pipeline** with GitHub Actions.
* [ ] Enhance **mobile-first responsiveness**.
* [ ] Add **JWT authentication**.
---
## 📞 Contact
* **Email:** [mayzamrodrigues@gmail.com](mailto:mayzamrodrigues@gmail.com)
* **LinkedIn:** [linkedin.com/in/mayza-ynara-mendes-rodrigues](https://linkedin.com/in/mayza-ynara-mendes-rodrigues)
* **Portfolio:** [mayzamendesrodrigues.github.io]