Git Product home page Git Product logo

next-js-14-starter-template's Introduction

Free Next JS 14 boilerplate for indiehackers!

cover

  • Modified from shadcn-ui/taxonomy project. Do check it out. Modified it for my daily purpose ✅

  • A Next.js 14 template for indiehackers, buildinpublic people to building apps quickly ✅

  • Uses Postgres as DB, NextAuth 4, Tailwind CSS has support for dark mode ✅

Open to suggestions to make this better for indiehackers to get started with their projects and code fast!

PS: I have a SaaS newsletter worth checking it out! Moving ahead 👇🏼

Contributions, feedback and ideas welcome!

Motivation

The shadcn-ui/taxonomy project has a lot of dependencies that is heavy on dependencies for using blog, has content layer, mdx and so on.

I wanted a bare bones simple scaffolding for building SaaS apps quicker and always use this template to start things from here,

so thought might as well share it with people!

Usage

git clone https://github.com/soulbliss/next-js-14-starter-template.git

Features

  • Next.js 14 App Directory
  • Node pg support
  • NextAuth 4
  • Radix UI Primitives
  • Tailwind CSS
  • Google fonts
  • Icons from Lucide
  • Dark mode with next-themes
  • Tailwind CSS class sorting, merging and linting.

Guide for beginners

  1. For generating quick logos use Logofa.st by Marc Lou and put the generated logo in /public folder.
  2. Use Favicon Generator for site icon. Download the zip file and put this into the /public folder:
  3. Can find nice hero patterns for landing page here on hero patterns

Adding login functionality

  1. Copy sample.env.local and create env.local. Fill up the postgres database credentials.

  2. PG_DB_USER=
    PG_DB_NAME=
    PG_DB_PASSWORD=
    PG_DB_HOST=localhost
    PG_DB_PORT=5432
    PG_DB_SSL=false
    PG_DB_MAX_CONNECTIONS=20
    PG_DB_IDLE_TIMEOUT=10000
    
    GOOGLE_CLIENT_ID=
    GOOGLE_CLIENT_SECRET=
    
  3. You need to connect to a postgres instance

  4. Copy sample.env.local and create env.local. Fill up the postgres database credentials.

  5. PG_DB_USER=
    PG_DB_NAME=
    PG_DB_PASSWORD=
    PG_DB_HOST=localhost
    PG_DB_PORT=5432
    PG_DB_SSL=false
    PG_DB_MAX_CONNECTIONS=20
    PG_DB_IDLE_TIMEOUT=10000
    
  6. Open migrations file and run the Sql query.

  7. Run pnpm run dev and you can use login

License

Licensed under the MIT license.

next-js-14-starter-template's People

Contributors

soulbliss avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.