Simple Student Saver

This small project is academic. It has been developed with Native Web Development Languages. The main goal of the project is to save a student data inside a Database. The project is subdivided in two parts such as: Front-end and Back-end. In Front-end, we have two views: register and saved students pages. Theses pages are using basic HTML and CSS to draw layouts, controls and JavaScript to make some HTTP requests to Back-end via Node.js. In students data page, a JavaScript functional component is built to draw each specific student data with animation effects attached to that. In Back-end, a simple Node.js API is developed to get and treat client requests. Express.js is used as a server to run this project. Note that each student data is stored into a local Database called SQLite. The communication between Front-end and Back-end uses AJAX and data transfer uses JSON language.

Table of contents

1. Access link
2. Reference
3. Final result
   1. Video
   2. Screenshots
4. Project installation
   1. Nodejs installation
   2. Sources code cloning
   3. Dependencies installation
   4. Project execution

Access link

The project is already hosted on web and can be accessible through the link below :

• https://simple-student-saver.onrender.com

Reference

The project can be found via the link below :

• https://gitlab.com/obrymec/simple_student_saver

Final result

This is the final result of the project :

Video

Screenshots

Project installation

👉 If you want to get project sources code, make sure to have NodeJs already installed in your machine. If it isn't the case, you can install it from nvm.

Nodejs installation

cd ~;\
sudo apt install curl;\
curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash;\
source ~/.bashrc;\
nvm --version;\
nvm install --lts;\
node --version;\
npm install yarn --global;\
yarn --version

Sources code cloning

git clone git@github.com:obrymec/simple_student_saver.git student_saver/

Dependencies installation

Go to the root folder of the project sources and run :

yarn install

Project execution

Go to the root folder of the project and run :

yarn start

Then, open your favorite browser and tap on the search bar, the following link :

http://localhost:5000/

If you want to navigate between views, you can provide the following links :

http://localhost:5000/students
http://localhost:5000/sign-up

Enjoy :)