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.
Note: Delete this note and update the table of contents based on what sections you keep.
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 thedata.json
file, try using timestamps and dynamically track the time since the comment or reply was posted.
- Solution URL: Add solution URL here
- Live Site URL: Add live site URL here
- Prisma - An ORM for NextJS
- Material-Tailwind - CSS library
- React - JS library
- Next.js - React framework
- Styled Components - For styles
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
}
Will eventually finish the backed system to achieve a fullstack CRUD system.
- Prisma - Deploy to Vercel rally easy...
- Website - Thomas Tschoepke Soares
- Frontend Mentor - @ttsoares