bg

My Startpage

About this project

A personal fullstack project being used as an everyday startpage. Secured with an authentication using Clerk Auth as an "admin" user that only I am able to add link sources for quick access on websites and adding notes that I usually visit and SQLite as my database for storage via Prisma ORM. There are also options either "Duckduckgo" or "Google Search" as search engines and vanilla javascript for the greetings, date and time.

  1. NextJs/ReactJs
  2. TailwindCSS
  3. Prisma ORM
  4. SQLite Database
  5. Clerk Auth
  6. React-Markdown
  7. Typescript
  8. Zod

I. App when not logged in:

This is what the app looks like when I am not logged in. The user is presented with a clean interface to browse publicly available features and perform searches.

II. App when logged in:

After logging in, additional navigation bar will be shown in order for me to navigate into the notes, sources links and dashboard pages as well as user button and shortcut link to background image setting page at the top right of the page.

Features includes the ability to add, edit or delete notes, sources links and, edit or delete images that I can then use to choose as my background image for the whole app. The UI is tailored for authenticated users with admin privileges and since this is my personal app, I set my authentication restriction to not being able to sign-up new users which was manually configured in clerk auth dashboard.

Features:

CRUD Operations

  • Create, Read, Update and Delete functionalities for notes, sources links, adding topics and categories and background images.
  • Data Mutations using Next.js Server Actions: Behind the scenes, I use Next.js Server Actions to handle all my data changes. Whether I’m adding a new source link, updating a note, or deleting content, these server actions ensure everything is handled securely and efficiently. With Prisma ORM interacting with my SQLite database, each change is instantly reflected across the app, so I always have up-to-date content available, tailored just for my personal use. This seamless integration makes it easy for me to keep my startpage fresh and fully personalized.

Search Engine

  • With input bar and select options between Google or Duckduckgo search engines when looking up the internet or browsing the web.

Role-Based Access Control Authentication

  • Basic Role-Based Access Control (RBAC) aunthentication with Clerk metadata for personal security which was set to only "Admin" role to access form to add link sources.

Greetings, Date and Time

  • The greetings, date, and time displayed on the startpage are dynamically generated using JavaScript, based on the current system time and date of the user's PC.

Responsive Designs/Layouts

  • The app is fully responsive, ensuring that the layout adapts seamlessly across different devices, maintaining a clean and user-friendly experience on both desktop and mobile using CSS3 media query.
Go back...