This project was created as part of the 4Geeks Academy bootcamp. It is a blog-style application that lists and displays details of various elements from the Star Wars universe (characters, planets, vehicles, etc.).
The app fetches data from an API and allows users to:
- View items by category on the homepage.
- Click on an item to see detailed information.
- Use a smart search bar to filter through elements.
- Navigate smoothly thanks to React Router.
- Enjoy a themed experience with SVG images, animated star backgrounds, and responsive design.
Global state is managed using useReducer and the Context API, wrapped inside custom hooks like useGlobalReducer. Data is fetched asynchronously with hooks like useLoadData and useAllCategoryItems.
Adrián MRC
Project created during the Full Stack Developer Bootcamp at 4Geeks Academy.
- React (latest version)
- Vite (fast bundler and dev server)
- React Router (for routing and navigation)
- Custom Hooks (
useLoadData,useGlobalReducer, etc.) - Vercel (for deployment)
-
Clone the repository:
git clone https://github.com/4GeeksAcademy/Blog-StarWars-AdrianMRC.git cd Blog-StarWars-AdrianMRC -
Ensure you have Node.js v20 or higher installed.
-
Install the dependencies:
npm install
-
Run the development server:
npm run dev
Access the app at
http://localhost:3000.
src/
├── App.jsx # Root app component
├── assets/img/ # Image assets
├── components/ # UI components
├── hooks/ # Custom hooks
├── pages/ # Main views
├── routes.jsx # React Router configuration
├── store.js # Global state with useReducer
├── main.jsx # Entry point
└── index.css # Global styles
-
Install the CLI and log in:
npm i -g vercel vercel login
-
Deploy the app:
vercel --prod
This project is licensed under the MIT License. Feel free to use, modify, and share it.