DEV Community

Cover image for Notes app with NextJS

Posted on

Notes app with NextJS

What I built

I developed a simple notes app with NextJS that authenticates via Auth0 and does CRUD operations via the API endpoints in NextJS to the database in HarperDB. This was deployed on vercel.

Category Submission:

Wacky Wildcards

App Link


Login screen

Auth0 login:
Auth0 login

Add note:
Add note

View notes:
View notes

Search note

Edit or delete note:
Edit or delete note


The app does the following:

  • Let's the user signin with auth0
  • Adds notes to the database created in HarperDB with the user's email
  • Supports Editing or Deleting existing notes
  • Search box in the homepage to filter notes

Link to Source Code

Permissive License

MIT License

Background (What made you decide to build this particular app? What inspired you?)

I have the habit of taking notes while on calls at work or while watching or reading learning content. I mostly use notepad and save those notes in the localdrive, sometimes I also save notes on google docs, or as files in my github repo. This is a simple utility which I think can be used atleast by me for writing some short notes on web and use it anywhere. Secondly I wanted to participate atleast with anything simple as it's sometime now.

How I built it (How did you utilize GitHub Actions or GitHub Codespaces? Did you learn something new along the way? Pick up a new skill?)

I have used GitHub Codespaces initially for writing code for this project. I realised it had certain functionalities like AWS Cloud9. However Codespaces seems to be like VS code on the web, shortcuts like Ctrl b(hide or show folder), Ctrl j(Terminal toggle), Ctrl [ or ] for indentation, all seem working. I am yet to explore GitHub actions, I am guessing it could help setting up workflows or CI/CD pipelines for the code in the repo.

Here is a screenshot from codespaces:

Additional Resources/Info

I followed this quick start for integrating Auth0 with NextJS. The env vars related to HarperDB can be obtained from the config section of the studio. The list of environment variable names are added to .env.example. The sample notes used for testing where generated with ChatGPT. And I logged in with the google signin to test.

This app was lint checked with strict mode:

% npm run lint

> notes-app@1.0.0 lint
> next lint

- info Loaded env from /Users/networkandcode/notes-app/.env.local
āœ” No ESLint warnings or errors
Enter fullscreen mode Exit fullscreen mode

Image credit unsplash


I have tried github actions with an example docker workflow provided in the actions page, for which I used this dockerfile

The workflow ran successfuly and an image was pushed here

This image is public, and I can now use docker to pull and try running this on codespaces.

$ docker pull

$ docker run -d -p 3000:3000 --env-file .env.local

$ docker ps
CONTAINER ID   IMAGE                                   COMMAND                  CREATED          STATUS          PORTS                                       NAMES
551c561623dc   "docker-entrypoint.sā€¦"   46 seconds ago   Up 44 seconds>3000/tcp, :::3000->3000/tcp   elated_newton
Enter fullscreen mode Exit fullscreen mode

I could now access the application on the codespaces url that's port forwared to localhost:3000.
App preview with docker. There are many more examples in the workflow actions, and I think it would be worth trying to extend the workflow to deploy directly to a kubernetes once the image is built.

Top comments (0)