https://github.com/elisa-amaral/student-information-system-built-with-reactjs

Student Information System built with React.js to consume a REST API developed as the back-end.
https://github.com/elisa-amaral/student-information-system-built-with-reactjs

axios css editorconfig eslint html javascript lodash prettier react react-hooks reactjs redux redux-persist redux-saga styled-components

Last synced: 2 months ago
JSON representation

Student Information System built with React.js to consume a REST API developed as the back-end.

• Host: GitHub
• URL: https://github.com/elisa-amaral/student-information-system-built-with-reactjs
• Owner: elisa-amaral
• Created: 2023-01-24T21:46:40.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2024-02-07T12:26:13.000Z (over 2 years ago)
• Last Synced: 2025-03-15T00:22:29.960Z (over 1 year ago)
• Topics: axios, css, editorconfig, eslint, html, javascript, lodash, prettier, react, react-hooks, reactjs, redux, redux-persist, redux-saga, styled-components
• Language: JavaScript
• Homepage: https://drive.google.com/file/d/1tw9IOyYjFAfCuUykKCh8ybdebyM7X9ww/view?usp=sharing
• Size: 552 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 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](/public/assets/img/screenshots/Screenshot_1.jpg)

## Screenshot 2: Home Page (All Students)

![Screenshot](/public/assets/img/screenshots/Screenshot_2.jpg)

## Screenshot 3: Edit Student Data

![Screenshot](/public/assets/img/screenshots/Screenshot_3.jpg)

## Screenshot 4: Upload/Update Student Profile Picture

![Screenshot](/public/assets/img/screenshots/Screenshot_4.jpg)

## Screenshot 5: Add New Student

![Screenshot](/public/assets/img/screenshots/Screenshot_5.jpg)

## Screenshot 6: Edit Administrator Account Data

![Screenshot](/public/assets/img/screenshots/Screenshot_6.jpg)

## 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](https://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