README.md

QuizHub Frontend

Welcome to QuizHub, a web application for creating and managing quizzes. This project was bootstrapped with Create React App.

Table of Contents

• Installation
• .env Configuration
• Running the App
• Building for Production
• Ejecting
• File Structure
• Colors Used
• Assets and Credits
• Additional Resources

Installation

Prerequisites

Before running the frontend, ensure you have the following installed:

• Node.js (version 14 or above)
• npm or yarn

To install and run the frontend locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/MaryEhb/QuizHub.git
   cd QuizHub/frontend

2. Install dependencies:

   npm install

.env Configuration

Before starting the app, you need to set up a .env file in the root directory of the project with the following environment variables:

REACT_APP_BACKEND_API_URL=http://localhost:8081/api
REACT_APP_CLASSROOM_TITLE_LIMIT=50
REACT_APP_CLASSROOM_DESCRIPTION_LIMIT=500

These environment variables are essential for configuring the backend API URL and setting limits for classroom titles and descriptions.

Running the App

To start the development server, use:

npm start

Open http://localhost:3000 in your browser to view the app. The page will reload automatically when you make changes. Any lint errors will be displayed in the console.

Building for Production

To build the app for production, use:

npm run build

This will bundle the app and optimize it for performance. The build files will be placed in the build folder. Your app is now ready for deployment!

For more information on deployment, see the Create React App deployment documentation.

Ejecting

If you need more control over the build configuration, you can eject by running:

npm run eject

Note: This is a one-way operation. Ejecting will expose the build configuration files and dependencies, giving you full control but also requiring you to manage them manually.

File Structure

Here’s a brief overview of the key directories and files in the project:

src/
├── components/         # Reusable components like classroom cards and test cards
├── pages/              # All page components (Login, Dashboard, etc.)
├── sass/               # Contains all Sass stylesheets
├── contexts/           # Context API files for managing global states (error, loading)
├── services/           # API services like authService and classroomService
├── App.js              # Main app file
├── index.js            # Entry point for React app

Colors Used

Here are the colors used in the application design:

Color Name	Hex Value	Icon
Gray	#848182
Black	#231F20
Mint Green	#8FFFA9
Tangerine	#FE5D32
Sunshine Yellow	#FFF461
Light Sunshine Yellow	#FFE499
Soft Beige	#EFDCD7
Light Beige	#F3EBE9
White	#FFF

These colors are used to maintain a consistent and visually appealing interface throughout the application.

Assets and Credits

• Illustrations: The illustrations used in this project were sourced from Designstripe under the Cheerful style.
• Icons: Icons are provided by React Icons for use in the app.

Additional Resources

• Learn more about Create React App in the official documentation.
• Check out the React documentation to learn more about React.

For advanced topics, you can refer to these resources:

• Code Splitting
• Analyzing the Bundle Size
• Making a Progressive Web App
• Advanced Configuration
• Troubleshooting Build Issues