Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/youssefelghamour/holbertonschooldashboard
Front-end dashboard built with React for students to track their courses, progress, scores, and view school updates and news.
https://github.com/youssefelghamour/holbertonschooldashboard
es6 javascript normalizr react react-redux react-router-dom reactjs redux redux-middleware redux-thunk webpack
Last synced: about 1 month ago
JSON representation
Front-end dashboard built with React for students to track their courses, progress, scores, and view school updates and news.
- Host: GitHub
- URL: https://github.com/youssefelghamour/holbertonschooldashboard
- Owner: youssefelghamour
- Created: 2024-11-23T17:39:43.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-11-23T18:12:24.000Z (about 1 month ago)
- Last Synced: 2024-11-23T18:29:58.010Z (about 1 month ago)
- Topics: es6, javascript, normalizr, react, react-redux, react-router-dom, reactjs, redux, redux-middleware, redux-thunk, webpack
- Language: JavaScript
- Homepage:
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Holberton School Dashboard
The **Holberton School Dashboard** is a school portal designed to help students track their academic progress and stay informed. It allows students to log in, view their courses, monitor their progress and scores, and keep up with the latest news and updates from the school.
## Features
- **Student Login**: Secure authentication for students to access their personalized dashboard.
- **Course Management**: Students can view and track their enrolled courses, assignments, and scores.
- **Progress Tracking**: Real-time tracking of academic performance and grades.
- **School Updates**: Displays news, announcements, and updates from the school.
- **Responsive UI**: A dynamic layout that adapts to both desktop and mobile devices.
## Technologies Used
- **JavaScript (ES6)**: Language used for building the dashboard.
- **React**: Frontend JavaScript library for building the user interface.
- **Redux**: State management library for handling user data and application state.
- **React Router**: For dynamic routing within the application.
- **Aphrodite**: Library for managing inline styles and dynamic styling in React.
- **Redux Thunk**: Middleware for handling async actions in Redux to fetch data from the API.
- **Normalizr**: Data normalization library for the data fetched from the API.
- **Immutable.js**: Data structures for managing state immutability.
- **Webpack**: Module bundler for JavaScript applications.
## Setup
To set up the **School Dashboard** locally:
1. Clone the repository:
```bash
git clone https://github.com/youssefelghamour/HolbertonSchoolDashboard.git
```
2. Navigate to the project directory:
```bash
cd HolbertonSchoolDashboard
```
3. Install dependencies:
```bash
npm install
```
4. Start the app:
```bash
npm start
```
5. Access the app at `http://localhost:8080`
## Demo Video
https://github.com/user-attachments/assets/16b1b974-bde0-4606-bac1-c0587c447953
## Next Steps
The next step for this project would focus on adding a REST API backend using **Express.js**, **MySQL** to manage and store user data securely and **Sequelize ORM** for seamless database interaction and data modeling.
## Authors
- **Youssef El Ghamour** - [GitHub](https://github.com/youssefelghamour) | [LinkedIn](https://www.linkedin.com/in/youssefelghamour/)
This project is derived from another one of my projects. To explore the full commit history or check out the original repository, visit [this link](https://github.com/youssefelghamour/alx-react).
