Layout Lab

This is a school project for @bdernier's FullStack course.
The exercise was to create a blog site with the topic of our choice, I went to web design, one of my favorite topics.

Authors

• @LeoBessin

Tech Stack

Client: NextJs, Prisma, TailwindCSS

Server: Node, MongoDb

Color Reference

Accent Glow Color	Hex
100	#f24e1e
200	#ff7262
300	#a259ff
400	#1abcfe
500	#0acf83

Accent Color	Hex
100	#666666
200	#f7f7f7

Background Color	Hex
100	#1a1a1a
200	#292929
300	#404040

Primary Color	Hex
100	#333333
200	#5c5c5c
300	#b9b9b9

Text Color	Hex
100	#ffffff
200	#e0e0e0

Features

• Create/edit account
• Create/read/like/save/filter posts
• Create/read comments

Installation

Install LayoutLab with npm

  npm install
  npx prisma generate
  npx prisma db push

create a .env file and add :

DATABASE_URL=<mongo_db_connection_string>
URL="http://localhost:3000"
NEXTAUTH_SECRET=<random_string>

Page design

Home

Sign in

Dashboard

Create post

Post detail

Comments / Footer

User detail

Demo

🚀 About Me

I'm a full stack (student) developer...