a learning platform designed for students in rural areas of Africa (especially Kenya) who have limited access to traditional schools.
# RuralGlow
a learning platform designed for students in rural areas of Africa (especially Kenya) who have limited access to traditional schools.
## π οΈ Installation
1. Install dependencies:
```bash
npm install
# or
yarn install
```
2. Start the development server:
```bash
npm start
# or
yarn start
```
## π Project Structure
```
react_app/
βββ public/ # Static assets
βββ src/
β βββ components/ # Reusable UI components
β βββ pages/ # Page components
β βββ styles/ # Global styles and Tailwind configuration
β βββ App.jsx # Main application component
β βββ Routes.jsx # Application routes
β βββ index.jsx # Application entry point
βββ .env # Environment variables
βββ index.html # HTML template
βββ package.json # Project dependencies and scripts
βββ tailwind.config.js # Tailwind CSS configuration
βββ vite.config.js # Vite configuration
```
## π§© Adding Routes
To add new routes to the application, update the `Routes.jsx` file:
```jsx
import { useRoutes } from "react-router-dom";
import HomePage from "pages/HomePage";
import AboutPage from "pages/AboutPage";
const ProjectRoutes = () => {
let element = useRoutes([
{ path: "/", element: },
{ path: "/about", element: },
// Add more routes as needed
]);
return element;
};
```
## π¨ Styling
This project uses Tailwind CSS for styling. The configuration includes:
- Forms plugin for form styling
- Typography plugin for text styling
- Aspect ratio plugin for responsive elements
- Container queries for component-specific responsive design
- Fluid typography for responsive text
- Animation utilities
## π± Responsive Design
The app is built with responsive design using Tailwind CSS breakpoints.
## π¦ Deployment
Build the application for production:
```bash
npm run build
```