5chan — The 4chan clone with NextJs

This the continuation of the 5chan project : we’ve already discussed the Design and API
So for the final step I’ll create the frontend.

The flow:

  • New user opens homepage / app
  • Gets assigned a random user id until clears data
  • Generate random Avatars using @dicebar/avatars
  • Can create posts / delete own posts
  • Look through posts timeline
  • Reply to posts

Now, we’ll init a nextjs app and install the dependencies we’ll need:

  • Chakra-UI — Components
  • swr — Data fetching
  • zustand — state management
  • @dicebear/avatars — generating avatars
  • formik — manage, validate post create form
  • To setup chakra-ui, you’ll have to wrap the app with ChakraProvider like so:
  • The types.ts for consistent structures:
  • Generating random user and avatar data then storing them in LocalStorage for later use :
  • The great thing about zustand is that you don’t have the wrap the entire app inside a context to use it. It can stay away from the UI code as small stores. So it’s easy to use.
  • Now the API requests to POST& GET replies:
  • The API calls for POSTing, GET ing & DELETEing posts:

OK now comes the final boring part, designing the UI. but it’s ok we only have three pages to code:

  • Index page — intro, how to use.
  • Home page — timeline of posts, discussions.
  • Posts page : dynamic page according to post id.

You may design them however you want but if you still want to look over the code you can find the source code at:

layout

components

pages

That’s about all we need right now.
After running the project and deploying it.
Here are the screenshots ✨✨

This project is live at:
https://5chan.vercel.app/

The source code of this project lies at: https://github.com/100lvlmaster/5chan-go

onw to 10x developer