Scribd
Upload
5 views3 pages

Mini React Projects

The document outlines two mini React projects for students: a Book Manager App and a Weather App with Login. Both projects emphasize user authentication, CRUD operations, and data persistence using localStorage, while teaching key React concepts such as routing and API integration. Bonus features and shared authentication logic are also included to enhance learning and functionality.

Uploaded by

adeyemipraise2708
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views3 pages

Mini React Projects

The document outlines two mini React projects for students: a Book Manager App and a Weather App with Login. Both projects emphasize user authentication, CRUD operations, and data persistence using localStorage, while teaching key React concepts such as routing and API integration. Bonus features and shared authentication logic are also included to enhance learning and functionality.

Uploaded by

adeyemipraise2708
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Mini React Projects for Students

Mini Project 1: Book Manager App

Mini Project 1: Book Manager App

Overview:

A simple app where logged-in users can add, view, edit, and delete books. Data is saved using localStorage.

Users must be logged in to access the dashboard.

Core Features:

User Authentication

- Simple login form (username + password)

- Auth state stored in React Context or localStorage

- Only authenticated users can access the app

Book CRUD Operations

- Create: Add a new book (title, author, genre, year)

- Read: Display a list of all books

- Update: Edit a book's info

- Delete: Remove a book from the list

Save Data

- Use localStorage to persist books and users

Routing

- /login - login form

- /dashboard - book manager (protected route)

Bonus Features

- Filter/search books by title or genre

- Pagination if more than 10 books


Mini React Projects for Students

What Students Will Learn:

- React Router & Protected Routes

- CRUD operations with useState / useEffect

- React Context or basic auth system

- Controlled forms

- Reusable components

Mini Project 2: Weather App with Login

Mini Project 2: Weather App with Login

Overview:

A weather search app that only works for logged-in users. Users can search by city and view current weather

using an external API like OpenWeatherMap.

Core Features:

User Authentication

- Simple login system (like Book App)

- Store user session using localStorage

Weather Search

- Search bar for entering city name

- Fetch weather info via API (OpenWeather)

- Show: Temperature, Weather condition, Humidity, Wind speed

Save Search History (CRUD)

- Save each searched city

- User can view past searches

- User can delete any from the list


Mini React Projects for Students

Bonus Features

- View search history on a separate page

- Dark mode toggle

- Location auto-detection (advanced)

What Students Will Learn:

- Fetching data from public APIs

- useEffect for API calls

- Auth guard logic

- localStorage saving

- Clean UI and conditional rendering

Shared Authentication Logic

Login/Authentication Shared Between Projects

Login Flow:

- Create a Login component with dummy auth (e.g., hardcoded user/password)

- Store user in localStorage on success

- Use React Context or useState to manage auth globally

- Protect routes using conditional redirects

You might also like