|
|
|
Next Starter is my frontend next js project boilerplate with all the tools and react packages I could possibly need in various situations from form validation, data fetching to styling.
I have included all the tools I use almost in every project, anyone can use this too to get started quickly without hustle of hunting and installing packages.
The following tools were used in this frontend project:
- Next Js React Js Production Grade Framework
Used for frontend, cool stuff like server side rendering, and more!
- Tailwind CSS Utility Based CSS Framework
Used for utility level styling, and customization.
- Material Design React Components Framework By Google
Used for component level styling, tables and layouts.
- Headless UI A No brainer UI logic handler
Used for UI logic, and accessibility implementation.
- React Hook Form Best react form handler library
Used for form state handling and validation.
- Yup And Hook Form Resolvers Form Schema & regex validator
Used for validating user input against ideal formats.
- React Query Data fetching, caching and local storage handler
Used for fetching api data, cache it and other cool stuff.
- Axios Data fetching, for making api calls instead of fetch api.
Used for the actual api endpoint calling.
- React Icons Bringing all kinds of icon into our project
Only install this one package to acces fontawesome, bootstrap, and other icons and others.
- React Unicons Newish icons, not available in react icons yet!
Icons by icon scout are cool and modern, optional!
- React Reveal Do component entry transitions and animations
Used for transitions and animations based on observer api.
- Next Seo Handle your next js seo like a pro!
Used to replace next js's default seo handler.
- Recharts Visualize your data with charts.
Used to visualize data in pie charts, bar charts etc!
- Swiper Js Want to do some carousel or slider?
Use this one for carousel and slider.
- Sass In case you want to do write some custom css, sass is the way!
Used to add capabilities on top of css.
- Currency Formatter Format curreny with thousands seperator, etc.
Add comma, dot, and other seperators to your currency.
- Dotenv Prevent environment Variables and api tokens from getting exposed.
Do the process.env.NODE_ENV thing, and other things.
- React Recipe Get useful react custom hooks eg. useOnline, useLocalStorage, etc.
Get all hooks at your disposal.
- React Use Get useful react custom hooks eg. useOnline, useLocalStorage, and others missing in react recipe.
Get all hooks at your disposal.
- Loaders (Am thinking of halogen + react-typed),
- Skeleton Loaders (...nothing yet),
- Search Functionality (Search UI + Algolia),
- Date & Timezone Handling (dfn or ???).
-
Json Placeholder my favourite quick api mockup,
-
Mock Api quick api mockup for crud operations,
-
Random User dummy user data,
-
Exchange Rate get accurate exchange rates,
-
Rapid Api an ocean of APIs,
- Dribble specifically for design inspirations,
- Checklist Design my UX playbook,
- Prime React See implementation ideas and inspiration from thier paywall locked components,
- Icon Scout they just got realy nice stuff like 3d illustrations and lottie animations,
To have things set up and running is kind of easy, just clone the project to your machine and do yarn or npm install to install all packages and that's it, start minting your frontend. See below example.
# Clone this project
$ git clone https://github.com/Husseinkizz/next-starter
# Access
$ cd next-starter
# Install dependencies
$ yarn
# Run the project in development mode
$ yarn dev
# The server will initialize in the <http://localhost:3000>You only need to have Node Js installed on your machine and also yarn if that's what you use. You can always download and install node js from thier official website and to install yarn after installing node you can use the following command.
# Install yarn using npm
$ npm i yarn -g
The tech stack used herein is just my personal preference and guided by my experience in past projects, you may suggest better ones or change things yourself. Feel free to contribute to this project if you have any suggestions or only install only those tech you like in the stack. Thanks!
Made with ❤️ by Hussein Kizz