Donis.dev logo

Feely Message - Share and Browse special occasion messages

Technologies: Next.Js, App Router, Tailwind, Firebase, shadcn

Completed in 2023

feelymessage project image
feelymessage project image
feelymessage project image
feelymessage project image
feelymessage project image
feelymessage project image

Feely Message - Special Occasion Message Sharing Platform

Feely Message is a Fullstack web app developed using Next.js 13.4, Tailwind CSS, and Firebase integration. The app revolves around sharing and browsing special occasion messages, allowing users to contribute their own messages for various occasions.

Motivation

This app was created to learn and practice Next.JS App Router and Server Components.

Features

  • Next auth and firebase adapter for session management.
  • Login using a google account.
  • Profile page and ability to delete account if user wants to remove all personal data from app's firestore database.
  • Ability to post and edit messages.
  • Adding hashtags will serve as a category. Each category can be individually browsed.
  • Admin user privileges for one admin (Defined as an env variable ADMIN_UID) who can delete posts from any user.

Tech Stack

  • Next.JS 13.4.2 : The core of the application. Handles both frontend and backend requests. I've used both server components to fetch db data and api routes to learn about both.
  • NextAuth : Handles the app authentication along with google auth provider. Stores users & sessions in firestore db.
  • FireBase: Firestore database for my data storage with a generous free tier
  • Tailwind Css: My component styles are done inline using tailwind
  • Shadcn/UI: Cards, buttons, dialog components etc... Great resource with built in accessibility. These components are built on top of RadixUi primitives with minimal styling

Deployment

Application is deployed to Vercel free tier.

Credit

This app was inspired by this great youtube tutorial which helped me get started.