Back to Projects Menu

Catatanku

Catatanku is like a notes app, this project built on React + Vite, user can make notes with (regular/archive) and built in authentication system

September 30, 2023 - a year ago

Website
|
Image cover blog Catatanku

Backstory Why Me Made This Project?

Project Catatanku is Notes app, Project Catatanku was build with one of modern technology front-end web development namely ReactJS. There are some additional package dependencies for supporting this project. These include Vite for front-end module bundler, TailwindCSS for styling, Catatanku has implemented PWA (Progressive Web Apps) technology. so has implemented PWA on this project has the advantage of a website being like a native application. Catatanku is one page application.

Goals Build This Project

Main goals for building this project, including the following:
  • To exercise and deeping ReactJS.
  • To exercise and deeping about behavior state on React.
  • To exercise and deeping about React component lifecycle (class component and functional component).
  • To exercise and deeping Built in React Hook.
  • To exercise implementation authentication on react app.
I was learning a lot about front-end web development while build this project, after i finish this project, i think my programming skills are improved over time.

Feature on Catatanku Project

The Catatanku Project has several features, including the following:
  • Has implemented web responsive for multiple device.
  • PWA (Progressive Wep Apps), this website can have behavior like a mobile apps.
  • Authentication system
    • Register page, user can create account when user have no account.
    • Login page, user can authentication and login to catatanku as a user.
  • Home page
    • User can read notes.
    • User can search note by name.
    • User can move from regular notes to archive notes.
    • user can delete notes.
  • Archive page
    • User can read notes (archive).
    • User can search note (archive) by name.
    • User can move from archive notes to regular notes.
    • user can delete archive notes.
  • Detail note page
    • User can read detail notes.
  • Create new note page
    • User can create new note through this page

How to Start this project

1. Clone repository using git

git clone https://github.com/ZnovandaP/dicoding-react-intermediate-submission-2.git

2. Install all dependencies

pnpm install

3. Run development server

pnpm run dev
Open http://localhost:3000 with your browser to see the result.

Responsive Web Design on Multiple Devices

Ilustration responsive design Catatanku Project

Last but not least

if you interested on this project, you can visit this project directly Catatanku Project, also you can visit on Github Repository Catatanku Project, last if you wanna give me suggesstion or advice you can go to contact page directly. Thankyou so much.

Tech Stack: