https://github.com/youssefelghamour/CodeWave
Front-end dashboard built with React for students to track their courses, progress, scores, and view school updates and news.
https://github.com/youssefelghamour/CodeWave
es6 javascript normalizr react react-redux react-router-dom reactjs redux redux-middleware redux-thunk webpack
Last synced: 9 months 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/CodeWave
- Owner: youssefelghamour
- Created: 2024-11-23T17:39:43.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-23T16:11:09.000Z (over 1 year ago)
- Last Synced: 2025-01-23T16:35:08.206Z (over 1 year ago)
- Topics: es6, javascript, normalizr, react, react-redux, react-router-dom, reactjs, redux, redux-middleware, redux-thunk, webpack
- Language: JavaScript
- Homepage:
- Size: 18.4 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](#)
[](#)
[](#)
[](#)
[](#)
# CodeWave School Website
The **`CodeWave School Website`** 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.
- **MongoDB**: NoSQL database used to store application data.
- **Node.js**: JavaScript runtime environment for building the backend.
- **Express**: Web framework for building the backend API with Node.js.
## Setup
1. Clone the repository:
```bash
git clone https://github.com/youssefelghamour/CodeWave.git
```
2. Navigate to the server directory:
```bash
cd CodeWave/server
```
3. Install server dependencies:
```bash
npm install
```
4. Set up the database (inserts data into the database):
```bash
node utils/dbSetup.js
```
5. Start the API:
```bash
node api/server.js
```
6. In a separate terminal, navigate to the client directory and install dependencies:
```bash
cd CodeWave/client
npm install
```
7. Start the React app:
```bash
npm start
```
8. Visit the app at `http://localhost:8080`.
9. You can visit the API help page at `http://localhost:5000`.
## Demo Video
https://github.com/user-attachments/assets/696b4831-04a2-4e3a-a542-8bdd7baaf242
## Usage
Once CodeWave is set up, you can use the following steps to interact with the platform:
- Sign up as one of theregistered students (example):
- **email:** youssefgr@email.com
- **password:** password1
- Sign up as the admin:
- **email:** admin@email.com
- **password:** admin
- Admins can access the dashboard to manage data, create, delete, and update student profiles, courses, and other admin-level operations.
## Authors
- **Youssef El Ghamour** - [GitHub](https://github.com/youssefelghamour) | [LinkedIn](https://www.linkedin.com/in/youssefelghamour/)
