DEV Community: Piyush Pandey

Get Started with Next.js, Typescript, Tailwind

Piyush Pandey — Mon, 27 Jun 2022 07:04:55 +0000

This post is about a starter template I have made with minimal setup bootstrapped with Next.js, TypeScript and Tailwind CSS.

The versions of the tech used will be updated with latest.

You can check out the starter page here.

Having a starter template is better than a step-by-step guide.

zephyrus21 / next-ts-tailwind-starter

Minimal Next.js + TypeScript + Tailwind CSS starter template.

⚡next-ts-tailwind-starter⚡

Minimal Next.js + TypeScript + Tailwind CSS starter template.

Made by Piyush Pandey

Give a ⭐ if you want to appreciate.

1. Use this template in any of the two methods:

Use this template button. (Recommended)
- A new repo will be created
- Clone the repo from your GitHub and you are good to go!!!

Using create-next-app

npx create-next-app -e https://github.com/zephyrus21/next-ts-tailwind-starter project-name

yarn create next-app -e https://github.com/zephyrus21/next-ts-tailwind-starter project-name

Disclaimer: You can use npm or yarn as per your preference.

2. Install dependencies

cd to the project folder then

yarn install

3. Run the development server

You can start the server using this command:

yarn dev

Open http://localhost:3000 with your browser to see the result. You can start editing the page by modifying src/pages/index.tsx.

View on GitHub

Thanks for reading

If you like my work give it a 🌟 and connect to me with piyushpandey.tech

Complete road map to learn React

Piyush Pandey — Sat, 01 May 2021 10:30:07 +0000

The original post is in Notion. Do checkout.
Here

React is a library (from Facebook) for building composable user interfaces. It encourages the creation of reusable UI components, which present data that changes over time. React abstracts away the DOM from you, offering a simpler programming model and better performance.

Getting Started - React, Hooks & Redux

You could learn React.js from a variety of resources. Pick the best for you.

Learn from the official documentation of React.

React - A JavaScript library for building user interfaces

Take a course from Udemy.

Link to some of the best Courses.

Modern React with Redux Training Course

React 16: The Complete Course (incl. React Router 4 & Redux)

Watch YouTube Tutorials.

Complete React Course (the best on YouTube)

Full React Course 2020 - Learn Fundamentals, Hooks, Context API, React Router, Custom Hooks

Full Modern React Tutorial

Only looking for React Concepts (do watch for clearing concepts)

ReactJS Tutorial for Beginners

React Hooks Tutorial

If you are looking for a quick Crash Course.

Learn React JS - Full Course for Beginners - Tutorial 2019

In this section you must have learned about React along with Redux and other various packages and technologies. Here is a quick link for you on Create React App.

Create React App

Deep dive into Redux

Refer to this websites for in-depth concepts on Redux.

React Redux | React Redux

Redux Toolkit | Redux Toolkit

A complete advanced Redux Course.

The Ultimate Redux Course

Clear you redux concepts with this playlist.

React Redux Tutorial

Firebase with React

Learn how to integrate Firebase with Your App.

React, Redux & Firebase App Tutorial

UI Components and Styles

Though you can use CSS, SCSS for your styling but there are some UI components libraries.

UI Libraries

Material-UI: A popular React UI framework

Ant Design - The world's second most popular React UI framework

Design System for React JS

Styled Components

This is one of the most in fact the most powerful styling tool for react.

styled-components

Also look for this awesome CSS framework

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Here is a awesome site to motivate you to develop awesome shits.

React.js Examples

Another site with awesome Libraries for your React project.

React Libraries

Now that you have a complete knowledge on React, Styling and Firebase, have a look at this curated playlist of some awesome react projects.

React Best Tutorials

Also below is a complete React roadmap.

At this point of time you must have made 2, 3 projects and are ready to go on to the next thing. React Frameworks.

React Frameworks

There are two best framework using React.

Gatsby.js

The Fastest Frontend for the Modern Web

Here are some of the best Tutorials available on YouTube

Gatsby Tutorial

Gatsby JS - The Great Gatsby Bootcamp [Full Tutorial]

Next.js

Next.js by Vercel - The React Framework

Here are some of the best Tutorials available on YouTube

Next.js Tutorial for Beginners

Next.js Crash Course 2021

GraphQL

This is a awesome Tool for query, specially if you use Gatsby or Next then you must learn it as both of them heavily rely upon this.

A query language for your API

Here are some of the best Tutorials available on YouTube

GraphQL Tutorial

GraphQL Full Course - Novice to Expert

How to begin with coding & ahead.

Piyush Pandey — Sat, 26 Dec 2020 05:43:21 +0000

So if you are here then you must be new to coding and must have interest to learn and begin with this beautiful affair of writing codes.

One thing I can tell you that "Codes are dumb." but you are not and you can make your code smart and effective.

How, Where and When to start?

When to start is quite simple, as you are reading this you must already be knowing the answer and there is not any particular time to start.

Where to start might be a bit confusing for beginners but I would suggest you to begin from books of the language you want to learn, but books might not be that intuitive for all, then I would say you could watch some youtube videos and there are a lots of them on a single topic.

And how to start is not quite simple as it sounds, first you need to know what you wanna learn code for, just for academics to get good marks, to make a career in coding or just for fun and to look cool. If just for academics and fun you can go on by learning languages like C, C++, Java, Python and it will be fine but if you want to make a career then you need to know which field to target and which language and technologies to learn to make an impact.

Setup

This is not a article about a particular language but you will need a code editor or IDE of your choice VS Code preferred but you can use any and you will also need to install the compilers of the language.

Resources to learn

There are some great websites, books and courses for learning languages and I will link some free resources below.

These videos will get you started with basics of the language.

DevDocs.io the best resource for any language - https://devdocs.io/
W3Schools is another great website - https://www.w3schools.com/

1. C Language

2. C++

3. Java

4. Python

5. HTML, CSS

6. JavaScript

How to practice your skills

After you learn your desired language of choice you have to practice lots of questions and can also do competitive coding on websites like Hacker Rank or Code Forces. Geeks for Geeks is one of the best website to improve your skills for any language, do give it a shot.

What's next?

This article was all about beginning with coding and you only have to choose your path next if you want to be web dev, app dev, data science or any other.

I will soon make one other on complete web dev roadmap as I am a web developer.

Click here to know more about me

Hope you like it, if you do follow me on Instagram and also on Github. 😊