damla / ad-app

NextJS app with App Router, SASS, Typescript, Postgresql, Cloudinary, Yup, React Hook Forms, Docker, Context API, Prisma and Tanstack Query.

Projects

Project Name	Technologies Used	Links
NextJS w/App Router Starter	- NextJS w/App Router - NextAuth - TypeScript - Prettier - Eslint - Husky - SwaggerUI - Supabase - Prisma ORM - TailwindCSS - Vercel	📦 Repo 🌐 Website
Advertisement App	- NextJS w/App Router - CSS Modules & SASS - TypeScript - Prisma - Docker - PostgreSQL - Cloudinary - React Hook Forms - Yup - Supabase - Context API - Tanstack Query (see: 🎋branch) - Local Storage - Vercel	📦 Repo 🌐 Website
Karsal	- NextJS - TypeScript - MongoDB - i18n localization router - SASS Modules - React Responsive - Vercel	📦 Repo 🌐 Website
Source Pocket	- Docusaurus v2 - ReactJS - Algolia - MDX - Netlify	📦 Repo 🌐 Website
connEth	- NextJS - TypeScript - TailwindCSS - Moralis - Prisma - MetaMask - Husky - Lint Staged - HeadlessUI - Vercel	📦 Repo
Damla Köksal Personal Website	- GatsbyJS - MDX - Vercel	📦 Repo 🌐 Website
Clou	Shopify	🌐 Website

ad-app's Issues

Implement Design

Description

Implement these pages without functionality.

• Home Page

• Add Ad

Create Database

Description

• Create a Postgres db both on local(Docker) and prod(Supabase) environments.

• Advertisement data will be saved to the database. Sorting information will be saved on global state and local storage.

Advertisement Type

export interface Advertisement {
  id: string
  title: string
  favoriteCount: number
  isUrgent: boolean
  imageUrl: string
  lastUpdated: Date
}

Schema

model Advertisement {
  id            String   @id @default(cuid())
  title         String   @db.VarChar(500)
  favoriteCount Int      @default(0)
  isUrgent      Boolean  @default(false)
  imageUrl      String
  lastUpdated   DateTime @updatedAt
}

Implement

• Listing Advertisement

• Deleting Advertisement

• Adding Advertisement

• Favoriting Advertisement

Implement the Design System

Description

• Implement SASS by using modules structure.
• Implement the Design System.

Implementation of TanStack Query

Description

• Implement Tanstack Query to apply client-side fetching and cache the data.

Refactor the project

Description

• Making some changes to the overall structure of the project.