https://github.com/samuel-ricardo/js_mastery_clone
A discovery of perfomance in website with NextJS using JS Mastery Site as example
https://github.com/samuel-ricardo/js_mastery_clone
Last synced: 3 months ago
JSON representation
A discovery of perfomance in website with NextJS using JS Mastery Site as example
- Host: GitHub
- URL: https://github.com/samuel-ricardo/js_mastery_clone
- Owner: Samuel-Ricardo
- License: mit
- Created: 2023-12-09T18:41:14.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-14T13:59:40.000Z (about 1 year ago)
- Last Synced: 2025-01-14T12:43:38.833Z (5 months ago)
- Language: TypeScript
- Homepage: https://js-mastery-clone.vercel.app
- Size: 8.23 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# js_mastery_clone
🚀 🟪 JS Mastery 🟪 🚀
This application is a conclusion of my study about website perfomance with NextJS using JS Mastery Site as example
#
|
Overview |
Technologies |
Project |
Run |
Author |
#
| :artificial_satellite: About:
In this project, the objective is to build a website that beats all the main factors and metrics that measure how fast and well-structured an application can be, along with good ranking and SEO strategies. These metrics are known as Web Vitals
With this objective in mind, I recreated the JS_Mastery website using React and the NextJS Framework, with the idea of creating a project closer to the real world, having to deal with dynamic data coming from Sanity CMS;
📡 | Hosted on Vercel: [ https://js-mastery-clone.vercel.app/ ]
#
:building_construction: | Technologies and Concepts Studied:
> 
- NextJS 14
- TailwindCSS
- Shadcn/ui
- Typescript
- Docker
- Sanity
- SWR
- eslint
- Prettier
- husky
- lint-staged
- Caching
- Perfomance
- SEO
- Scalability
- Web Vitals
> Among Others...
#
💻 | Application:
The application is a website where we show all the courses offered by JS Mastery, you can do a search in real time, navigate between them and see more details
*Remember this software runs on free machines, that is, with the minimum of resources to fit into free plans, so with scarce resources in the production environment these were the results I obtained
### GTmetrix
In GTmetrix I got an A grade, having a great performance with all metrics and the total page load was below 1 second
All page metadata has been properly treated
### PageSpeed Insights - [ PC ]
I also analyzed PageSpeed Insights, similar to Google Chrome Lighthouse. In it I obtained 100% performance, 97% accessibility, 100% in good practices and 100% in SEO, all metrics with great results
### PageSpeed Insights - [ Mobile ]
This tool also allows you to test a mobile environment, with reduced computing resources and 3G internet to simulate a smartphone. Even in this scenario, the site maintains a notable high performance.
📡 | Hosted on Vercel: [ https://js-mastery-clone.vercel.app/ ]
👨💻 | How to use
### Open your Git Terminal and clone this repository
```git
$ git clone "[email protected]:Samuel-Ricardo/js_mastery_clone.git"
```
### Make Pull
```git
$ git pull "[email protected]:Samuel-Ricardo/js_mastery_clone.git"
```
This application use `Docker` so you dont need to install and cofigurate anything other than docker on your machine.
> 
Navigate to project folder `$ cd ./js_mastery/` and run it using `docker-compose`
```bash
# After setup docker environment just run this commmand on root project folder:
$ docker-compose up --build # For First Time run this command
$ docker-compose up # to run project
```
```bash
#Apps Running on:
$ APP: http://localhost:3000
See more: ./js_mastery/docker-compose.yaml
```
#
:octocat: | Author:
