Dive into the world of Next.js, Incredible JSMastery.pro replica website built with Next.js using TypeScript & Tailwind CSS πͺ
- Table of Contents
- π Introduction
- πΎ Technologies Used
- π§° Getting Started
- π· Screenshots
- π Contributing
β οΈ License- π€ Contact
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.
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
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.
Download or clone this repo by using the link below:
https://github.com/ladunjexa/nextjs13-jsmastery.git
JSMastery clone using NPM (Node Package Manager), therefore, make sure that Node.js is installed by execute the following command in consle
node -v
Go to root folder and execute the following command in console to get nodemon the required packages:
npm install
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
.
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!
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.
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!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
) - Commit your Changes (
git commit -m 'Add some AmazingFeature'
) - Push to the Branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
Hilink web application is open source and distributed under the MIT License.
If you want to contact me, you can reach me at @ladunjexa.