victorbruce / nextjs-starter-kit Goto Github PK

View Code? Open in Web Editor NEW

✨ NextJs starter template to get me up and running quickly when building new apps

Shell 0.71% JavaScript 5.49% TypeScript 72.73% CSS 21.08%

nextjs-starter-kit's Introduction

NextJs Starter Kit

A NextJs starter kit template for my personal needs.

Demo Link

This template is hosted on vercel at: https://nextjs-starter-kit-coral.vercel.app

About The App

A NextJs texmplate starter kit that comes with theme switching, multi language swtiching, analytics, end-to-end testing using Cypress, linting and code formating, and continuous integration using Github Actions already set up.

Tech Stack

React (NextJs)
Typescript
TailwindCss
Framer Motion
Cypress
Github Actions

Setting Up The Project

Clone the project onto your development machine
Cd into the project and install all the dependencies by running yarn install
Run the command yarn dev to kick start the development server
Run the command yarn test to run Cypress in headless mode or yarn run e2e to run cypress in a browser

Project Folder Structure

📂 .github: holds all the yaml files for your github actions
📂 .husky: contains post and pre commit scripts to ensure linting and formatting rules are adhered to before commiting your code
📂 cypress: folder that contains all your e2e tests written in Cypress
📂 public: keep all your images, svgs, fonts, etc. here
📂 src: this is where all your main code for your app resides
- 📂 components: contains a list of shared components used across the app.
- 📂 context: contains a list of shared context used across the app.
- 📂 data: a folder that is great for storing any mock data like json data or constant variables that don't change, etc.
- 📂 hooks: keep any hooks file shared across the app you can think of here.
- 📂 lang: holds a list of different languages for internationalisation purposes(switching between different languages).
- 📂 layouts: specifically for components that deals with laying things out such as side bars, nav bars, etc.
- 📂 lib: abstract 3rd party libraries that will be used across many places in your code. Eg. axios, etc.
- 📂 pages: holds files to individual pages users can route to.
- 📂 services: place all your services for interacting with APIs here.
- 📂 styles: keep your stylesheets here
- 📂 utils: keep resuable functions for performing a single task here(pure functions)

nextjs-starter-kit's People