ttsoares/dialogs

https://www.frontendmentor.io/challenges/interactive-comments-section-iG1RugEG9

Frontend Mentor - Interactive comments section solution

This is a solution to the Interactive comments section challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

The challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Create, Read, Update, and Delete comments and replies
• Upvote and downvote comments
• Bonus: If you're building a purely front-end project, use localStorage to save the current state in the browser that persists when the browser is refreshed.
• Bonus: Instead of using the createdAt strings from the data.json file, try using timestamps and dynamically track the time since the comment or reply was posted.

Screenshot

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

Built with

• Prisma - An ORM for NextJS
• Material-Tailwind - CSS library
• React - JS library
• Next.js - React framework
• Styled Components - For styles

What I learned

Started the process of building the full CRUD system with Prisma and PostgreSQL

model User {
  id          String   @id @default(uuid())
  username    String   @unique
  coments     Coment[]
  avatar_png  Bytes
  avatar_webp Bytes
  Reply       Reply[]
}

model Coment {
  id        String   @id @default(uuid())
  content   String   @db.Text
  owner     User     @relation(fields: [ownerId], references: [id])
  ownerId   String
  createdAt DateTime @default(now())
  score     Int
  comenter  String
  replyes   Reply[]
}

model Reply {
  id         String   @id @default(uuid())
  content    String   @db.Text
  coment     Coment   @relation(fields: [comentId], references: [id])
  comentId   String
  createdAt  DateTime @default(now())
  score      Int
  replyingTo String
  comenter   User     @relation(fields: [comenterId], references: [id])
  comenterId String
}

Continued development

Will eventually finish the backed system to achieve a fullstack CRUD system.

Useful resources

• Prisma - Deploy to Vercel rally easy...

Author

• Website - Thomas Tschoepke Soares
• Frontend Mentor - @ttsoares

Acknowledgments

• Tutorial - Step By Step Guide to Next.js13 Tailwind Prisma Postgresql