DR.

AKHILESH DAS GUPTA INSTITUTE OF

TECHNOLOGY & MANAGEMENT

SUMMER
TRAINING
PROJECT PPT

NAME : UDIT BHATIA

ROLL NO : 00196203119
About The Course
• Complete Web Development Bootcamp, is  a course to learn to code and become a full-stack
web developer offered by udemy .
• The course is taught by Angela Yu. She’s lead instructor at the App Brewery,
London's leading in-person programming bootcamp.
• In this course updated technologies are taught well & made easy to learn
• This course is good enough for beginners without coding knowledge
ABOUT THE PROJECT

• This project is a basic note making app

• It has dynamic addition & deletion functionality
• It’s a react native project
• It’s a purely Front end website
• It has been made live on Heroku
PROJECT DEVELOPMENT

The project has been broken down into 3 stages

• Stage 1 – Basic frame development
• Stage 2 – React props addition
• Stage 3 – react hooks addition
Stage 1 Basic frame addition
• First the components are added
• Components include app, header, footer & note
• Index.js with html & css is added for basic frame
• Title in header , copyright with dynamic year change in footer & app content in note index
& app.jsx is added
Stage 2 React Props Addition
• Array of sample notes is added in notes.js
• Title & content of notes act as props
• These props are passed throughout the app.jsx
• Array of notes are mapped & are accessed by app.jsx with the help of react props
Stage 3 React Hooks Addition

• Hooks were added to React in version 16.8.

• Hooks allow function components to have access to state and other React features. Because
of this, class components are generally no longer needed.
• React hooks keep track of title & content
• Through add button new note is added to a new array & each note is rendered
• Callback from the note component is triggered
• Filter function filters the items to be deleted
• Unique note id is passed to the filter & that note is
deleted
Final App site after stylizing
CONCLUSION

• React is a new & interesting framework

• Easy to understand & a popular framework
• Keeper app is helpful for making notes
• Can be helpful while making or discussing projects or meetings
• Front end development at it’s finest is shown through this project
Future scope

• Various functionalities can be added

• Back end can be added through mysql & mongodb
• Colorful notes can be added
• Speech to text feature can be added
• Images & gif addition can be done in future
• This app lacks the functionality of logging in or reminder/alarms addition
Project Link & References
• Live site:- https://keeperappbyudit234.herokuapp.com/
• References-
• Wikipedia.org,'React(JavaScript Library)'.Accessible:
• Sanchit Aggarwal Web Development using ReactJS
• ReactJS.org,’ ReactJS official'. [Online]. Available: http://www.ReactJs.org
• https://www.wikipedia.org/
• https://github.com/
• https://stackoverflow.com/
• https://www.w3schools.com/css/
THANK YOU !