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

https://notes-app-pied-one.vercel.app/

Screenshots

Auth0 login:

Add note:

View notes:

Search:

Edit or delete note:

Description

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

https://github.com/networkandcode/notes-app

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

Image credit unsplash

Update:

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 ghcr.io/networkandcode/notes-app:main

$ docker run -d -p 3000:3000 --env-file .env.local ghcr.io/networkandcode/notes-app:main
551c561623dcefe5dc26b4762bc8806ca018a863ff8ad728d213cd861c882d16

$ docker ps
CONTAINER ID   IMAGE                                   COMMAND                  CREATED          STATUS          PORTS                                       NAMES
551c561623dc   ghcr.io/networkandcode/notes-app:main   "docker-entrypoint.s…"   46 seconds ago   Up 44 seconds   0.0.0.0:3000->3000/tcp, :::3000->3000/tcp   elated_newton

I could now access the application on the codespaces url that's port forwared to localhost:3000.
. 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.

Blog