Skip to content

Latest commit

 

History

History
134 lines (121 loc) · 3.98 KB

README.md

File metadata and controls

134 lines (121 loc) · 3.98 KB
Raw

Notepad

This project is based on REST API endpoints for creating, editing, and deleting notes. It uses HTTP requests to communicate between the client-side and server-side, allowing users to interact with the application in a seamless and efficient manner. The application also includes user authentication, which means users can create their own accounts and securely access their notes.

Setup

  • Clone this repo

  • Open the file and start:

    cd notepad

    First install all npm package in server folder and run it:

    cd server
npm install
npm run server

    Second install all npm package in client folder and run it:

    cd client
npm install
npm run client

  • Create .env file with the following variables:

      PORT
  MONGODB_URI
  SESSION_SECRET

File Structure

notepad
 ┣ client
 ┃   ┣ node_modules
 ┃   ┃  ┗ ...
 ┃   ┣ public
 ┃   ┃  ┣ index.html
 ┃   ┃  ┗ ...
 ┃   ┣ .gitignore
 ┃   ┣ package.json
 ┃   ┣ tsconfig.json
 ┃   ┗ src
 ┃      ┣ App.tsx
 ┃      ┣ index.tsx
 ┃      ┣ utils
 ┃      ┃     ┗ formatDate.ts
 ┃      ┣ components
 ┃      ┃     ┣ forms
 ┃      ┃     ┃   ┗ TextInputField.tsx
 ┃      ┃     ┣ NavBar.tsx
 ┃      ┃     ┣ SignUpModal.tsx
 ┃      ┃     ┣ LogInModal.tsx
 ┃      ┃     ┣ NavBarLoggedInView.tsx
 ┃      ┃     ┣ NavBarLoggedOutView.tsx
 ┃      ┃     ┣ Note.tsx
 ┃      ┃     ┣ AddEditNoteDialog.tsx
 ┃      ┃     ┣ NotesPageLoggedInView.tsx
 ┃      ┃     ┗ NotesPageLoggedOutView.tsx
 ┃      ┣ pages
 ┃      ┃     ┣ NotesPage.tsx
 ┃      ┃     ┗ NotFoundPage.tsx
 ┃      ┣ network
 ┃      ┃     ┣ utils
 ┃      ┃     ┃   ┗ fetchData.ts
 ┃      ┃     ┣ note_API.ts
 ┃      ┃     ┗ user_API.ts
 ┃      ┣ models
 ┃      ┃     ┣ note.ts
 ┃      ┃     ┗ user.ts
 ┃      ┣ errors
 ┃      ┃     ┗ http_errors.ts
 ┃      ┣ styles
 ┃      ┃     ┣ global.css
 ┃      ┃     ┣ App.module.css
 ┃      ┃     ┣ NotesPage.module.css
 ┃      ┃     ┣ Note.module.css
 ┃      ┃     ┗ utils.module.css
 ┣ server
 ┃   ┣ node_modules
 ┃   ┃  ┗ ...
 ┃   ┣ @types
 ┃   ┃  ┗ session.d.ts
 ┃   ┣ controllers
 ┃   ┃     ┣ notes.ts
 ┃   ┃     ┗ users.ts
 ┃   ┣ models
 ┃   ┃     ┣ notes.ts
 ┃   ┃     ┗ users.ts
 ┃   ┣ routes
 ┃   ┃     ┣ notes.ts
 ┃   ┃     ┗ users.ts
 ┃   ┣ middleware
 ┃   ┃     ┗ auth.ts
 ┃   ┣ utils
 ┃   ┃     ┣ assertIsDefined.ts
 ┃   ┃     ┗ validateEnv.ts
 ┃   ┣ app.ts
 ┃   ┣ server.ts
 ┃   ┣ .env
 ┃   ┣ .eslintrc.js
 ┃   ┣ .gitignore
 ┃   ┣ package.json
 ┃   ┗ tsconfig.json
 ┣ .gitignore
 ┗ README.md

NPM Packages

Client

Server

  • Optimized bcrypt in plain JavaScript with zero dependencies - bcrypt@5.1.0
  • TypeScript execution environment and REPL for node.js, with source map support - ts-node@10.9.1
  • Validation for your environment variables - envalid@7.3.1
  • Simple session middleware for Express - express-session@1.17.3
  • Create HTTP error objects - http-errors@2.0.0

Stack

  • Frontend: React / TypeScript
  • Backend: Express / Node
  • Database: MongoDB

Now you have it   🎉
Thank you for reading and happy coding  💚