Student Information System built with React.js

This project is a Student Information System built with React.js to consume a REST API.

Users can register as administrators, edit their admin account data and manage all students data. See details about all implemented features after the screenshots below.

Project Demonstration Video

https://drive.google.com/file/d/1tw9IOyYjFAfCuUykKCh8ybdebyM7X9ww/view?usp=sharing

Screenshot 1: Login Page

Screenshot 2: Home Page (All Students)

Screenshot 3: Edit Student Data

Screenshot 4: Upload/Update Student Profile Picture

Screenshot 5: Add New Student

Screenshot 6: Edit Administrator Account Data

Implemented Features

• User registration
• User data updating
• Student registration
• Student data updating
• Student registry deletion
• View all registered students
• View data from a specific student
• Student profile picture upload
• Student profile picture update
• Error handling through error message response

Important Details

All photos used in the video to test the profile picture upload/update features are under a copyright-free license.

All student data and user data is fictional (full names, email addresses, weight and height). This data was created for testing purposes with generatedata.com

Technology Stack

• React.js
• React Hooks
• React Styled Components
• React.js Icons
• Redux
• Redux Saga
• Redux Persist
• Axios
• Access-Control-Allow-Origin Chrome Extension
• Lodash
• JavaScript
• HTML
• EditorConfig
• ESLint
• Prettier
• Validator.js
• Express Delay (loading component)
• generatedata.com
• REST API