JSMastery.pro Clone

Dive into the world of Next.js, Incredible JSMastery.pro replica website built with Next.js using TypeScript & Tailwind CSS 🪐

View Demo

Table of Contents

• Table of Contents
• 🌟 Introduction
  • Folder Structure
• 👾 Technologies Used
• 🧰 Getting Started
  • ⚙️ Installation and Run Locally
    • Step 1
    • Step 2
    • Step 3
    • Step 4
  • Learn More
  • Deploy on Vercel
• 📷 Screenshots
• 👋 Contributing
• ⚠️ License
• 🤝 Contact

🌟 Introduction

This repository houses an amazing Next.js 13 Application which simulates the JSMastery.pro web application using Next.js, TypeScript, and TailwindCSS,combining powerful tools to deliver a responsive and user-friendly experience. The application is deployed on Vercel.

Folder Structure

JSMastery code folder structure is as follows:

nextjs13-jsmastery/
├── .vscode/
├   └── settings.json
├── app/
├   ├── (root)/
├   ├   ├── (home)/
├   ├   ├   └── page.tsx
├   ├   ├── resources/
├   ├   ├   ├── [id]/
├   ├   ├   ├   └── page.tsx
├   ├   ├   ├── loading.tsx
├   ├   ├   └── page.tsx
├   ├   ├── videos/
├   ├   ├   ├── loading.tsx
├   ├   ├   └── page.tsx
├   ├   ├── newsletter/
├   ├   ├   └── page.tsx
├   ├   ├── privacy-policy/
├   ├   ├   └── page.tsx
├   ├   ├── terms-of-use/
├   ├   ├   └── page.tsx
├   ├   └── layout.tsx
├   ├── studio/[[...index]]/
├   ├   └── page.tsx
├   ├── favicon.ico
├   ├── globals.css
├   ├── layout.tsx
├   └── page.tsx
├── components/
├   ├── atoms/
├   ├   ├── Arrow.tsx
├   ├   ├── DownloadButton.tsx
├   ├   ├── Header.tsx
├   ├   └── NextJsLogo.tsx
├   ├── home/
├   ├   └── Testimonials.tsx
├   ├── shared/
├   ├   ├── Footer.tsx
├   ├   ├── Navbar.tsx
├   ├   └── Theme.tsx
├   ├── newsletter/
├   ├   └── Countdown.tsx
├   ├── newsletter/
├   ├   ├── ContentCard.tsx
├   ├   ├── Document.tsx
├   ├   ├── Dropdown.tsx
├   ├   ├── Filters.tsx
├   ├   └── SearchForm.tsx
├   └── ui/
├       ├── accordion.tsx
├       ├── button.tsx
├       ├── card.tsx
├       ├── dropdown-menu.tsx
├       ├── input.tsx
├       └── skeleton.tsx
├── constants/
├   └── index.ts
├── context/
├   └── ThemeProvider.tsx
├── lib/
├   └── utils.ts
├── public/
├   └── assets/
├   ├   ├── icons/
├   ├   ├   └── [[...]].svg
├   ├   └── images/
├   ├       └── [[...]].{png,svg}
├   ├── next.svg
├   └── vercel.svg
├── sanity/
├   ├── lib/
├   ├   ├── client.ts
├   ├   └── image.ts
├   ├── schemas/
├   ├   ├── index.ts
├   ├   ├── resource-playlist.schema.ts
├   ├   ├── resource.schema.ts
├   ├   ├── video-playlist.schema.ts
├   ├   └── video.schema.ts
├   ├── actions.ts
├   ├── env.ts
├   └── utils.ts
├── types/
├   └── index.d.ts
├── .eslintrc.json
├── components.json
├── next.config.js
├── package.json
├── postcss.config.js
├── tailwind.config.ts
├── sanity.cli.ts
├── sanity.config.ts
└── tsconfig.json

👾 Technologies Used

Hilink web application is built using the following technologies:

• React: React is an open-source, front end, JavaScript library for building user interfaces or UI components.
• TypeScript: TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
• Next.js: Next.js is an open-source React front-end development web framework created by Vercel that enables functionality such as server-side rendering and generating static websites for React based web applications.
• Sanity: Sanity is the platform for structured content that lets you build better digital experiences and scale faster.
• shadcn/ui: A collection of accessible, reusable, and composable React components for faster and easier web development.
• Tailwind CSS: Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces.
• ESLint: ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code.
• Prettier: Prettier is an opinionated code formatter.
• Vercel: Vercel is a cloud platform for frontend developers, providing the frameworks, workflows, and infrastructure to build a faster, more personalized Web.

(back to top)

🧰 Getting Started

⚙️ Installation and Run Locally

Step 1

Download or clone this repo by using the link below:

 https://github.com/ladunjexa/nextjs13-jsmastery.git

Step 2

JSMastery clone using NPM (Node Package Manager), therefore, make sure that Node.js is installed by execute the following command in consle

  node -v

Step 3

Go to root folder and execute the following command in console to get nodemon the required packages:

npm install

Step 4

Go to root folder and execute the following command in console to start the application locally:

npm run dev

This is a Next.js project bootstrapped with create-next-app.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

(back to top)

📷 Screenshots

(back to top)

👋 Contributing

Contributions are always welcome!

See contributing.md for ways to get started.

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

⚠️ License

Hilink web application is open source and distributed under the MIT License.

(back to top)

🤝 Contact

If you want to contact me, you can reach me at @ladunjexa.

(back to top)