Introducing the “30 Days of 30 Projects” Challenge

7 min readAug 31, 2024

A new challenge for the GIAIC community, just like we did with the 100DaysOfCodingChallenge.

Introduction

Are you ready to improve your coding skills?

I am organizing the “30 Days of 30 Projects” Challenge at GIAIC.

Join over 30,000+ tech students learning on-site, and let this challenge spark your passion for coding while you build projects and take your skills to the next level.

➡️ Keep an eye on the Challenge Channel on Discord daily 👀

➡️ Access the GitHub repository for the Challenge Projects’ code here 🙌

➡️ Check out the live preview of the Challenge Projects here✨

Background

The “30 Days of 30 Projects” Challenge is not just another coding initiative.

It’s a well-organized challenge designed to help students with the latest coding skills through practical, hands-on experience.

Led by me, a Student Ambassador and Teaching Faculty Member at GIAIC, and supported by Sir Daniyal Nagori (CEO), Sir Ameen Alam (Dean of Faculty), and all of our amazing teaching faculty members.

Our goal is to enhance students’ technical abilities by building a variety of mini-projects.

Our focus is on using Next.js, TypeScript, TailwindCSS, Shadcn-ui, and Vercel, and other latest tech APIs.

We believe the best way to learn any technology is through consistent practice and project-based learning.

Many students aspire to seek web development but currently lack the necessary knowledge. This challenge aims to bridge that gap.

Over the next 30 days, we will build 30 different projects.

Every day, I’ll introduce a new project with a specific use case and provide a detailed, step-by-step written guide.

This guide will explain what to do and how to build the project from scratch, all within a day.

Each project focuses on a specific functionality, providing a solid introduction to using Next.js, TypeScript, TailwindCSS, Shadcn-ui, Vercel, and other technologies in a practical, hands-on way.

Goals

Enhance Coding Skills: Improve your understanding and practical skills in TypeScript, TailwindCSS, Next.js, and other technologies.
Build a Portfolio: Create 30 mini-projects to showcase in your portfolio, demonstrating your ability to implement various functionalities.
Daily Learning: Commit to a daily practice routine, reinforcing consistent learning and development.
Community Engagement: Engage with the tech community at GIAIC, sharing knowledge, tips, and support throughout the challenge.

Prerequisite

Before diving into the projects, ensure you have the following prerequisites:

Basic knowledge of HTML, and CSS.
Basic understanding of JavaScript and TypeScript.
An installed code editor (VSCode recommended).
Node.js installed on your machine.

First Installation and Configuration Guide

Learning Next.js can be an exciting journey!

Since Next.js is built on top of React, having a solid grasp of React’s principles and component-building techniques is crucial.

Although knowing React.js is not mandatory, it will definitely be helpful when learning Next.js.

We will cover all the basics of React.js & Next.js for beginners.

Setting Up Your Next.js Project

Create Project Directory: Open your terminal and navigate to the new directory (folder) where you want to create your project.
Initialize Project: Run the following command to set up a new Next.js project in that folder:

npx create-next-app@latest ./

This command sets up the necessary files and directories for your Next.js project, now you have to initialize and install shadcn-ui into your project using the following command:

npx shadcn@latest init

Now you can install any shadcn-ui components using the following command:

npx shadcn@latest add button input

Read the following guide for more details about Installation.

Project Structure


└── 📁nextjs-app
    |   .eslintrc.json            // ESLint configuration
    ├── .gitignore                // Git ignore file
    ├── 📁app
    │   ├── favicon.ico           // Favicon for the app
    │   ├── globals.css           // Global CSS styles
    │   ├── layout.tsx            // Main layout component
    │   └── page.tsx              // Main page component
    ├── 📁components
    │   ├── count-down.tsx        // Project components
    │   └── 📁ui                  // Shadcn-UI components
    │       ├── button.tsx        // Button component
    │       └── input.tsx         // Input component
    ├── components.json           // Component definitions (if any)
    ├── 📁lib
    │   └── utils.ts              // Utility functions
    ├── next-env.d.ts             // Next.js environment types
    ├── next.config.mjs           // Next.js configuration
    ├── package-lock.json         // Lock file for npm packages
    ├── package.json              // Project dependencies
    ├── postcss.config.mjs        // PostCSS configuration
    ├── 📁public
    │   ├── next.svg              // Next.js logo
    │   └── vercel.svg            // Vercel logo
    ├── README.md                 // Project README file
    ├── tailwind.config.ts        // Tailwind CSS configuration
    └── tsconfig.json             // TypeScript configuration

Take some time to understand the project structure. Key directories include:

app: Contains your application’s routes and pages.
public: Stores static assets like images and fonts.
components: Create reusable components in this folder.

Read the following guide for understanding the Project Structure of Nextjs.

Routing

Next.js uses a file-based routing mechanism:

To create a route, for example, /contact, create a folder named contact in the app directory and add a page.tsx file inside it.

Read the following guide for understanding the Routing in Nextjs.

Styling

Next.js provides flexibility in styling your components:

Import global CSS stylesheets.
Use CSS modules or CSS-in-JS libraries like styled-components.
Tailwind CSS combined with Shadcn UI is a great choice for styling in Next.js.

Read the following guide for understanding the Styling in Nextjs.

Run in development

To run your nextjs application in the development mode for testing purposes, use the following commands in the terminal, first open the terminal using ctrl + ` and then type the following:

npm run dev

and then open localhost:3000 on your browser and see the app

Important Commands

These are the most important commands you should to remember while building an nextjs application.

npm run dev - Starts the development server, enabling hot-reloading for easier and faster development.
npm run build - Compiles the application for production, optimizing it for performance.
npm run start - Launches the application in production mode using the optimized build files.
npm run clean - Cleans the project by removing temporary files, cache, and build outputs, ensuring a fresh build environment.

Package Management with npm

npm install <package-name> - Installs a new package and adds it to the dependencies in package.json.
npm uninstall <package-name> - Removes a package from the project and updates package.json.
npm install - Installs all dependencies listed in package.json.
npm update - Updates all the packages to the latest version according to the specified version range in package.json.
npm install <package-name>@<version> - Installs a specific version of a package.

Basic Shell Commands

ls - Lists all files and directories in the current directory.
mkdir <directory-name> - Creates a new directory.
cd <directory-name> - Changes the current directory to the specified directory.
rm -rf <directory-name> - Recursively deletes a directory and its contents.
rm <file-name> - Deletes a specific file.

Deployment

Learn about deployment options for your Next.js application. Vercel, Netlify, and AWS are popular platforms, with Vercel being the best as they are the creators of Next.js.