Notes App

Requirements

• Create a web application that will display a board of notes and will allow a user to post a new note on the board.
• Only authorized user can view the board.
• The board note needs to store the notes after refresh.
• Each note will have:
  • Author name
  • Content
  • Date
• When a note is clicked a modal window should be opened that will display the note content and allow update.
• Each note needs to have option to delete.
• In the main board – if the note content is too long it should be trimmed.
• Notes should be ordered by creation date
• Add a button to allow creating new notes
• Clicking on the add button will open a modal window with 2 text fields: author name and note content. Both fields are mandatory.
• After successful submission of the note it should be added to the main board.
• All pages should have a responsive behavior
• No server side is required

Sketches:

Main page – board:

Create new post:

Display post: please ignore the files attachments section

Tech/framework used

• ReactJS
• TypeScript

Installation

Running Locally

git, npm and node softwares should be installed before moving on

git clone https://github.com/dimakol/react-notes-app.git
cd react-notes-app
npm install
npm run dev

Building for production

npm run build

Credits

• React Notes App Tutorial from Scratch | A CSS and React Project you can add to your Portfolio!

Deployed to Github pages

https://dimakol.github.io/react-notes-app/

License

(The MIT License)

Copyright © 2023 Dima Kolyas