Sign in

onw to 10x developer

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
# Get the nextjs app template
npx…

This is the continuation of the 5chan project.

Creating the backend:

  • Setup project and download dependencies in one Ctrl+v-Ctrl-v :
# Create the 5chan directory
mkdir 5chan-go
# Create main.go
touch main.go
# Init the go project
go mod init github.com/100lvlmaster/5chan-go
# Get go-fiber
go get github.com/gofiber/fiber/v2
# Get GORM
go get github.com/gofiber/fiber/v2
# Get air
curl -sSfL https://raw.githubusercontent.com/cosmtrek/air/master/install.sh | sh -s -- -b $(go env GOPATH)/bin
# Setup air
air -c .air.toml
# Get godotenv to read env vars [optional]

Create a directory structure like so:

controllers

  • posts.go
  • replies.go

database

  • database.go

middleware

  • middleware.go

models

  • post.go
  • reply.go

routes

  • routes.go
  • main.go


This weekend I want to make a clone of 4 chan. It won’t be as big as 4chan lol.
But still I’ll use this post to design and decide the stack to use.

What is 4 chan

4chan is a simple image-based bulletin board where anyone can post comments and share images. There are boards dedicated to a variety of topics, from Japanese animation and culture to videogames, music, and photography. Users do not need to register an account before participating in the community.

~ 4chan Homepage

What we want 5chan to be

  • Text based
  • Anonymous [ no registration ]
  • Posts
  • Replies to posts
  • Timeline of posts on homepage

The tech stack :

Backend


  • Seeding NestJs with Prisma And Faker

I’ve been working on this college project and I chose NestJs for the backend. You could just Hasura or other BaaS platforms for small projects. But I wanted to learn NestJs.

Note: Usage with other ORMs might differ but will be almost the same because we’ll be using a script.

What you’ll need:

  • NestJs template for existing project setup with prisma as the default ORM

As someone once said.

ez commands got brrrr.

  • For NestJs.
git clone https://github.com/nestjs/typescript-starter.git project
cd project
yarn
yarn add -D prisma
npx prisma init

prisma/schema.prisma

// prisma/scheme.prisma

datasource db {
provider = "postgresql"
url =…

I’ve been using Sveltekit and svelte for over a year now. I’m also anxiously waiting for it to be matured enough to beat NextJs in terms of community. But I like them both.

So, on this weekend I wanted to turn one of my projects into a PWA. When I wanted to do with NextJs projects there were a lot of tutorials. But I couldn’t find many guides for svelte beginners.

That’s because svelte has pwa functionality built into it.

Note !
Basic things for all PWAs:
- A website
- manifest.json …


heroku ❤ gophers

This is continuation of the intersect project from

But feel free to easily use this to deploy your code.


inside the intersect

This is continuation of the intersect project from

The Nextjs App for the intersect

I’ll quickly use a template to create the nextjs app with basic setup
with Typescript, Tailwind support because css is boring.

git clone https://github.com/100lvlmaster/nextjs-tailwind-typescript-starter.gitcd nextjs-tailwind-typescript-starteryarn

This will give all the required tools already setup. So that we can get the app up and running in no time

  • You can use your preferred method for making a HTTP get request but I’m using axios in this one.
# lib/get_search.ts
import axios, { AxiosRequestConfig } from "axios";
export const getImages = async (searchString: string) => {
const config: AxiosRequestConfig = {…

golang

This is a series to build the intersect project .. ish

Building the REST API


What is the intersect?

From the famous series “Chuck”, the Intersect is a government database of encoded information harvested from every intelligence agency in the United States.


One for all — A VS Code theme 🚀

I was browsing through the Visual Studio Code marketplace, looking for a dark theme.

I’ve been through that conundrum before though I’ve always settled on One dark pro. Sure, it’s nice and pretty eye pleasing but i need something with more consistent colors.

So I made a VS Code theme, well actually two.

These are the things i wanted from One dark pro:-

  • Consistent colors.
  • Getting rid of that very distracting orange color in the status bar when debugging.
  • An option to a slightly more darker shade if i felt like it.
  • Slightly darker but more lighter blues
  • Minimal colors across the editor

I’ve switched lot of themes, A LOT…

Navin Kodag

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store