You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-[:gear: Installation and Run Locally](#gear-installation-and-run-locally)
34
+
-[Step 1](#step-1)
35
+
-[Step 2](#step-2)
36
+
-[Step 3](#step-3)
37
+
-[Step 4](#step-4)
38
+
-[Learn More](#learn-more)
39
+
-[Deploy on Vercel](#deploy-on-vercel)
40
+
-[:camera: Screenshots](#camera-screenshots)
41
+
-[:wave: Contributing](#wave-contributing)
42
+
-[:warning: License](#warning-license)
43
+
-[:handshake: Contact](#handshake-contact)
44
+
45
+
## :star2: Introduction
46
+
47
+
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.
48
+
49
+
### Folder Structure
50
+
51
+
<b>JSMastery</b> code folder structure is as follows:
52
+
53
+
```
54
+
nextjs13-jsmastery/
55
+
├── .vscode/
56
+
├ └── settings.json
57
+
├── app/
58
+
├ ├── (root)/
59
+
├ ├ ├── (home)/
60
+
├ ├ ├ └── page.tsx
61
+
├ ├ ├── resources/
62
+
├ ├ ├ ├── [id]/
63
+
├ ├ ├ ├ └── page.tsx
64
+
├ ├ ├ ├── loading.tsx
65
+
├ ├ ├ └── page.tsx
66
+
├ ├ ├── videos/
67
+
├ ├ ├ ├── loading.tsx
68
+
├ ├ ├ └── page.tsx
69
+
├ ├ ├── newsletter/
70
+
├ ├ ├ └── page.tsx
71
+
├ ├ ├── privacy-policy/
72
+
├ ├ ├ └── page.tsx
73
+
├ ├ ├── terms-of-use/
74
+
├ ├ ├ └── page.tsx
75
+
├ ├ └── layout.tsx
76
+
├ ├── studio/[[...index]]/
77
+
├ ├ └── page.tsx
78
+
├ ├── favicon.ico
79
+
├ ├── globals.css
80
+
├ ├── layout.tsx
81
+
├ └── page.tsx
82
+
├── components/
83
+
├ ├── atoms/
84
+
├ ├ ├── Arrow.tsx
85
+
├ ├ ├── DownloadButton.tsx
86
+
├ ├ ├── Header.tsx
87
+
├ ├ └── NextJsLogo.tsx
88
+
├ ├── home/
89
+
├ ├ └── Testimonials.tsx
90
+
├ ├── shared/
91
+
├ ├ ├── Footer.tsx
92
+
├ ├ ├── Navbar.tsx
93
+
├ ├ └── Theme.tsx
94
+
├ ├── newsletter/
95
+
├ ├ └── Countdown.tsx
96
+
├ ├── newsletter/
97
+
├ ├ ├── ContentCard.tsx
98
+
├ ├ ├── Document.tsx
99
+
├ ├ ├── Dropdown.tsx
100
+
├ ├ ├── Filters.tsx
101
+
├ ├ └── SearchForm.tsx
102
+
├ └── ui/
103
+
├ ├── accordion.tsx
104
+
├ ├── button.tsx
105
+
├ ├── card.tsx
106
+
├ ├── dropdown-menu.tsx
107
+
├ ├── input.tsx
108
+
├ └── skeleton.tsx
109
+
├── constants/
110
+
├ └── index.ts
111
+
├── context/
112
+
├ └── ThemeProvider.tsx
113
+
├── lib/
114
+
├ └── utils.ts
115
+
├── public/
116
+
├ └── assets/
117
+
├ ├ ├── icons/
118
+
├ ├ ├ └── [[...]].svg
119
+
├ ├ └── images/
120
+
├ ├ └── [[...]].{png,svg}
121
+
├ ├── next.svg
122
+
├ └── vercel.svg
123
+
├── sanity/
124
+
├ ├── lib/
125
+
├ ├ ├── client.ts
126
+
├ ├ └── image.ts
127
+
├ ├── schemas/
128
+
├ ├ ├── index.ts
129
+
├ ├ ├── resource-playlist.schema.ts
130
+
├ ├ ├── resource.schema.ts
131
+
├ ├ ├── video-playlist.schema.ts
132
+
├ ├ └── video.schema.ts
133
+
├ ├── actions.ts
134
+
├ ├── env.ts
135
+
├ └── utils.ts
136
+
├── types/
137
+
├ └── index.d.ts
138
+
├── .eslintrc.json
139
+
├── components.json
140
+
├── next.config.js
141
+
├── package.json
142
+
├── postcss.config.js
143
+
├── tailwind.config.ts
144
+
├── sanity.cli.ts
145
+
├── sanity.config.ts
146
+
└── tsconfig.json
147
+
```
148
+
149
+
## :space_invader: Technologies Used
150
+
151
+
Hilink web application is built using the following technologies:
152
+
153
+
-[React](https://reactjs.org/): React is an open-source, front end, JavaScript library for building user interfaces or UI components.
154
+
-[TypeScript](https://www.typescriptlang.org/): TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
155
+
-[Next.js](https://nextjs.org/): 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.
156
+
-[Sanity](https://www.sanity.io/): Sanity is the platform for structured content that lets you build better digital experiences and scale faster.
157
+
-[shadcn/ui](ui.shadcn.com): A collection of accessible, reusable, and composable React components for faster and easier web development.
158
+
-[Tailwind CSS](https://tailwindcss.com/): Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces.
159
+
-[ESLint](https://eslint.org/): ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code.
160
+
-[Prettier](https://prettier.io/): Prettier is an opinionated code formatter.
161
+
-[Vercel](https://vercel.com/): Vercel is a cloud platform for frontend developers, providing the frameworks, workflows, and infrastructure to build a faster, more personalized Web.
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
181
+
#### Step 2
18
182
19
-
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
183
+
**JSMastery** clone using NPM (Node Package Manager), therefore, make sure that Node.js is installed by execute the following command in consle
20
184
21
-
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
185
+
```bash
186
+
node -v
187
+
```
188
+
189
+
#### Step 3
22
190
23
-
## Learn More
191
+
Go to root folder and execute the following command in console to get nodemon the required packages:
192
+
193
+
```bash
194
+
npm install
195
+
```
196
+
197
+
#### Step 4
198
+
199
+
Go to root folder and execute the following command in console to start the application locally:
200
+
201
+
```bash
202
+
npm run dev
203
+
```
204
+
205
+
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
206
+
207
+
### Learn More
24
208
25
209
To learn more about Next.js, take a look at the following resources:
26
210
@@ -29,8 +213,51 @@ To learn more about Next.js, take a look at the following resources:
29
213
30
214
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
31
215
32
-
## Deploy on Vercel
216
+
###Deploy on Vercel
33
217
34
218
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35
219
36
220
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
221
+
222
+
<palign="right">(<ahref="#readme-top">back to top</a>)</p>
223
+
224
+
## :camera: Screenshots
225
+
226
+
227
+
228
+
<palign="right">(<ahref="#readme-top">back to top</a>)</p>
See [`contributing.md`](https://contributing.md/) for ways to get started.
239
+
240
+
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
241
+
242
+
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".
243
+
Don't forget to give the project a star! Thanks again!
244
+
245
+
1. Fork the Project
246
+
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
247
+
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
248
+
4. Push to the Branch (`git push origin feature/AmazingFeature`)
249
+
5. Open a Pull Request
250
+
251
+
<palign="right">(<ahref="#readme-top">back to top</a>)</p>
252
+
253
+
## :warning: License
254
+
255
+
_Hilink_ web application is open source and distributed under the [MIT License](https://github.com/ladunjexa/nextjs13-jsmastery/blob/main/LICENSE).
256
+
257
+
<palign="right">(<ahref="#readme-top">back to top</a>)</p>
258
+
259
+
## :handshake: Contact
260
+
261
+
If you want to contact me, you can reach me at [@ladunjexa](https://t.me/ladunjexa).
262
+
263
+
<palign="right">(<ahref="#readme-top">back to top</a>)</p>
0 commit comments