Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 5 days 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 (about 2 years ago)
Default Branch: master
Last Pushed: 2024-02-07T12:26:13.000Z (12 months ago)
Last Synced: 2024-11-20T21:44:25.786Z (2 months 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: 2
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