├── .env ├── .gitignore ├── README.md ├── app ├── (root) │ ├── (home) │ │ ├── loading.tsx │ │ └── page.tsx │ └── layout.tsx ├── favicon.ico ├── globals.css ├── layout.tsx └── studio │ └── [[...index]] │ └── page.tsx ├── components.json ├── components ├── Filters.tsx ├── Footer.tsx ├── Header.tsx ├── Navbar.tsx ├── ResourceCard.tsx ├── SearchForm.tsx └── ui │ ├── button.tsx │ ├── card.tsx │ ├── input.tsx │ └── skeleton.tsx ├── lib └── utils.ts ├── next.config.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── ChatGPT.png ├── Threejs-Cheatsheet.png ├── arrow-blue.svg ├── arrow_trail.svg ├── arrow_white.svg ├── downloads.svg ├── front-end-roadmap.png ├── hamburger-menu.svg ├── jsm-logo.svg ├── jsm_resources_banner.svg ├── jsm_resources_banner.webp ├── magnifying-glass.svg ├── next.svg ├── vercel.svg └── web3.0.png ├── sanity.cli.ts ├── sanity.config.ts ├── sanity ├── actions.ts ├── env.ts ├── lib │ ├── client.ts │ └── image.ts ├── schemas │ ├── index.ts │ ├── resource-playlist.schema.ts │ └── resource.schema.ts └── utils.ts ├── tailwind.config.ts └── tsconfig.json /.env: -------------------------------------------------------------------------------- 1 | # Warning: Do not add secrets (API keys and similar) to this file, as it source controlled! 2 | # Use `.env.local` for any secrets, and ensure it is not added to source control 3 | 4 | NEXT_PUBLIC_SANITY_PROJECT_ID="opkt8022" 5 | NEXT_PUBLIC_SANITY_DATASET="production" 6 | NEXT_PUBLIC_SANITY_TOKEN="skvvPEq1cYFgRgEx8MCFfk5fniYhysg4LmgaEsDSvQdcCZSjeeKrwL908FVJpNUEslX09SlRwcZVKkrgVyy9q5XEmQpYaMhJPODpcOYc2fJYUQ923iSzJISGX0N5bj8ZfLnSUdMI29nTSdTpmQSlTlzRbKJ2FqEdYNP7DXH0BpibRqrkuriw" -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env*.local 29 | 30 | # vercel 31 | .vercel 32 | 33 | # typescript 34 | *.tsbuildinfo 35 | next-env.d.ts 36 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # How I Made My Website Load in 0.364 Seconds | Build and Deploy 2 | ![Platform](https://i.ibb.co/Cmc2FhW/Thumbnail-11.png) 3 | 4 | ## https://jsmastery.pro/resources 5 | 6 | 7 | # Technologies and Frameworks 8 | 9 | - **Next.js**: A React framework for building JavaScript applications. 10 | - **Sanity.io**: A platform for structured content that comes with an open-source editing environment called Sanity Studio. 11 | - **Tailwind CSS**: A utility-first CSS framework for rapidly building custom user interfaces. 12 | - **TypeScript**: A statically typed superset of JavaScript that adds optional types. 13 | - **React**: A JavaScript library for building user interfaces. 14 | - **Node.js**: A JavaScript runtime built on Chrome's V8 JavaScript engine. 15 | - **CSS**: A stylesheet language used for describing the look and formatting of a document written in HTML. 16 | - **JSON**: A lightweight data-interchange format that is easy for humans to read and write and easy for machines to parse and generate. 17 | - **@sanity/image-url**: A library for generating image URLs with Sanity.io. 18 | - **next-sanity**: A library that provides utilities for working with Sanity.io in Next.js applications. 19 | - **clsx**: A tiny utility for constructing `className` strings conditionally. 20 | - **tailwind-merge**: A utility for merging Tailwind CSS classes. 21 | - **query-string**: A library for parsing and stringifying URL query strings. 22 | # Installation 23 | 24 | Follow these steps to install and setup the project: 25 | 26 | 1. Clone the repository to your local machine using the following command: 27 | 28 | ```bash 29 | git clone https://github.com/adrianhajdin/jsm_resources_next13.git 30 | ``` 31 | 32 | 2. Navigate to the project directory: 33 | 34 | ```bash 35 | cd jsm_resources_next13 36 | ``` 37 | 38 | 3. Install the required dependencies. The project requires Next.js, React, React DOM, Sanity, Styled Components, Tailwind CSS, TypeScript, and various other dependencies. You can install these using npm or yarn. Here is an example using npm: 39 | 40 | ```bash 41 | npm install 42 | ``` 43 | 44 | 4. Run the repo 45 | ```bash 46 | npm run dev 47 | ``` -------------------------------------------------------------------------------- /app/(root)/(home)/loading.tsx: -------------------------------------------------------------------------------- 1 | import { Skeleton } from "@/components/ui/skeleton" 2 | 3 | 4 | const loading = () => { 5 | return ( 6 |
7 |
8 | 9 |
10 | 11 |
12 | 13 |
14 | 15 | 16 | 17 |
18 |
19 |
20 | ) 21 | } 22 | 23 | export default loading -------------------------------------------------------------------------------- /app/(root)/(home)/page.tsx: -------------------------------------------------------------------------------- 1 | import Filters from '@/components/Filters' 2 | import Header from '@/components/Header'; 3 | import ResourceCard from '@/components/ResourceCard' 4 | import SearchForm from '@/components/SearchForm' 5 | import { getResources, getResourcesPlaylist } from '@/sanity/actions' 6 | 7 | export const revalidate = 900; 8 | 9 | interface Props { 10 | searchParams: { [key: string]: string | undefined } 11 | } 12 | 13 | const Page = async ({ searchParams }: Props) => { 14 | const resources = await getResources({ 15 | query: searchParams?.query || '', 16 | category: searchParams?.category || '', 17 | page: '1' 18 | }) 19 | 20 | const resourcesPlaylist = await getResourcesPlaylist(); 21 | 22 | console.log(resourcesPlaylist) 23 | 24 | return ( 25 |
26 |
27 |
28 |

JavaScript Mastery Resources

29 |
30 | 31 |
32 | 33 | 34 | 35 | {(searchParams?.query || searchParams?.category) && ( 36 |
37 |
41 | 42 |
43 | {resources?.length > 0 ? ( 44 | resources.map((resource: any) => ( 45 | 53 | )) 54 | ): ( 55 |

56 | No resources found 57 |

58 | )} 59 |
60 |
61 | )} 62 | 63 | {resourcesPlaylist.map((item: any) => ( 64 |
65 |

{item.title}

66 |
67 | {item.resources.map((resource: any) => ( 68 | 76 | ))} 77 |
78 |
79 | ))} 80 |
81 | ) 82 | } 83 | 84 | export default Page -------------------------------------------------------------------------------- /app/(root)/layout.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import Footer from '@/components/Footer' 4 | import Navbar from '@/components/Navbar' 5 | 6 | const layout = ({ children }: { children: React.ReactNode }) => { 7 | return ( 8 | <> 9 | 10 | {children} 11 |