{"id":20314155,"url":"https://github.com/samuel-ricardo/js_mastery_clone","last_synced_at":"2026-06-22T19:31:38.916Z","repository":{"id":211913713,"uuid":"729601836","full_name":"Samuel-Ricardo/js_mastery_clone","owner":"Samuel-Ricardo","description":"A discovery of perfomance in website with NextJS using JS Mastery Site as example","archived":false,"fork":false,"pushed_at":"2024-03-14T13:59:40.000Z","size":8634,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-04T08:44:45.307Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://js-mastery-clone.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Samuel-Ricardo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-12-09T18:41:14.000Z","updated_at":"2023-12-19T00:21:23.000Z","dependencies_parsed_at":"2024-03-14T15:18:31.914Z","dependency_job_id":null,"html_url":"https://github.com/Samuel-Ricardo/js_mastery_clone","commit_stats":null,"previous_names":["samuel-ricardo/js_mastery_clone"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Samuel-Ricardo/js_mastery_clone","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Samuel-Ricardo%2Fjs_mastery_clone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Samuel-Ricardo%2Fjs_mastery_clone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Samuel-Ricardo%2Fjs_mastery_clone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Samuel-Ricardo%2Fjs_mastery_clone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Samuel-Ricardo","download_url":"https://codeload.github.com/Samuel-Ricardo/js_mastery_clone/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Samuel-Ricardo%2Fjs_mastery_clone/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34663524,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-22T02:00:06.391Z","response_time":106,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-14T18:14:10.539Z","updated_at":"2026-06-22T19:31:38.900Z","avatar_url":"https://github.com/Samuel-Ricardo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# js_mastery_clone\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://fullcycle.com.br/\" target=\"_blank\"\u003e\n    \u003cimg width=\"auto\" src=\"./readme_files/cover.png\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch4 align=\"center\" \u003e🚀 🟪 JS Mastery 🟪 🚀\u003c/h4\u003e\n\n\u003ch4 align=\"center\"\u003e\n  This application is a conclusion of my study about website perfomance with NextJS using JS Mastery Site as example\n\u003c/h4\u003e\n\n#\n\n\u003cp align=\"center\"\u003e\n  |\u0026nbsp;\u0026nbsp;\n  \u003ca style=\"color: #8a4af3;\" href=\"#project\"\u003eOverview\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003ca style=\"color: #8a4af3;\" href=\"#techs\"\u003eTechnologies\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003ca style=\"color: #8a4af3;\" href=\"#app\"\u003eProject\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\n  \u003ca style=\"color: #8a4af3;\" href=\"#run-project\"\u003eRun\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\n  \u003ca style=\"color: #8a4af3;\" href=\"#author\"\u003eAuthor\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\u0026nbsp;\n\u003c/p\u003e\n\n#\n\n\u003ch1 align=\"center\"\u003e\n  \n  \u003ca href=\"https://github.com/Samuel-Ricardo\"\u003e\n    \u003cimg src=\"https://img.shields.io/static/v1?label=\u0026message=Samuel%20Ricardo\u0026color=black\u0026style=for-the-badge\u0026logo=GITHUB\"/\u003e\n  \u003c/a\u003e\n\n  \u003ca herf=\"https://www.instagram.com/samuel_ricardo.ex/\"\u003e\n    \u003cimg src='https://img.shields.io/static/v1?label=\u0026message=Samuel.ex\u0026color=black\u0026style=for-the-badge\u0026logo=instagram'/\u003e \n  \u003c/a\u003e\n\n  \u003ca herf='https://www.linkedin.com/in/samuel-ricardo/'\u003e\n    \u003cimg src='https://img.shields.io/static/v1?label=\u0026message=Samuel%20Ricardo\u0026color=black\u0026style=for-the-badge\u0026logo=LinkedIn'/\u003e \n  \u003c/a\u003e\n\n\u003c/h1\u003e\n\n\u003cbr\u003e\n\n\u003cp id=\"project\"/\u003e\n\n\u003cbr\u003e\n\n\u003ch2\u003e  | :artificial_satellite: About:  \u003c/h2\u003e\n\n\u003cp align=\"justify\"\u003e\nIn 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\n\u003c/p\u003e\n\n\u003cp align=\"justify\"\u003e\nWith 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;\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n📡 | Hosted on Vercel: [ https://js-mastery-clone.vercel.app/ ]\n\n\u003cbr\u003e\n\n#\n\n\u003cbr\u003e\n\n\u003ch2 id=\"techs\"\u003e\n  :building_construction: | Technologies and Concepts Studied:\n\u003c/h2\u003e\n\n\u003e \u003ca href='https://nextjs.org/'\u003e \u003cimg width=\"64px\" src=\"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/nextjs/nextjs-original-wordmark.svg\" /\u003e \u003c/a\u003e\n\n- NextJS 14\n- TailwindCSS\n- Shadcn/ui\n- Typescript\n- Docker\n- Sanity\n- SWR\n- eslint\n- Prettier\n- husky\n- lint-staged\n- Caching\n- Perfomance\n- SEO\n- Scalability\n- Web Vitals\n\n\u003e Among Others...\n\n#\n\n\u003cbr\u003e\n\n\u003ch2 id=\"app\"\u003e\n  💻 | Application:\n\u003c/h2\u003e\n\n\u003cp align=\"justify\"\u003e\nThe 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\n\u003c/p\u003e\n\n\u003cp align=\"justify\"\u003e\n*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\n\u003c/p\u003e\n\n\u003cbr/\u003e\n\n### GTmetrix\n\n \u003cimg width=\"auto\" src=\"https://media.discordapp.net/attachments/852529276083503134/1186477752036110366/image.png?ex=65e67303\u0026is=65d3fe03\u0026hm=c55fbd8fc21ab5a27048637146006febac323090d4047ec22af95274051779ce\u0026=\u0026format=webp\u0026quality=lossless\u0026width=705\u0026height=397\"/\u003e \n\n\u003cbr\u003e\n\n\u003cp align=\"justify\"\u003e\nIn GTmetrix I got an A grade, having a great performance with all metrics and the total page load was below 1 second\n\u003c/p\u003e\n\n \u003cimg width=\"auto\" src=\"https://media.discordapp.net/attachments/852529276083503134/1186478279272693881/image.png?ex=65e67381\u0026is=65d3fe81\u0026hm=234ca92331d2979e7ae62626ed78c1c58addf1be28f9389382c84114c9bfb6ad\u0026=\u0026format=webp\u0026quality=lossless\u0026width=705\u0026height=397\"/\u003e \n\n\u003cbr\u003e\n\n\u003cp align=\"justify\"\u003e\nAll page metadata has been properly treated\n\u003c/p\u003e\n\n### PageSpeed Insights - [ PC ]\n\n \u003cimg width=\"auto\" src=\"https://media.discordapp.net/attachments/852529276083503134/1186479624302100562/image.png?ex=65e674c2\u0026is=65d3ffc2\u0026hm=02059cfa35655199661d60848e73ebcdda3d06fc8e76acd562c174c4cbfd5bc3\u0026=\u0026format=webp\u0026quality=lossless\u0026width=705\u0026height=397\"/\u003e \n\n\u003cbr\u003e\n\n\u003cp align=\"justify\"\u003e\nI 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\n\u003c/p\u003e\n\n### PageSpeed Insights - [ Mobile ]\n\n \u003cimg width=\"auto\" src=\"https://media.discordapp.net/attachments/852529276083503134/1186479657671995422/image.png?ex=65e674ca\u0026is=65d3ffca\u0026hm=ab076e2de0546e7dd1b75af395b6a5b35a23dbc46da69c91a7d7c111e6f53641\u0026=\u0026format=webp\u0026quality=lossless\u0026width=705\u0026height=397\"/\u003e \n\n\u003cbr\u003e\n\n\u003cp align=\"justify\"\u003e\nThis 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.\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n📡 | Hosted on Vercel: [ https://js-mastery-clone.vercel.app/ ]\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n\u003ch2 id=\"run-project\"\u003e \n   👨‍💻 | How to use\n\u003c/h2\u003e\n\n\u003cbr\u003e\n\n### Open your Git Terminal and clone this repository\n\n```git\n  $ git clone \"git@github.com:Samuel-Ricardo/js_mastery_clone.git\"\n```\n\n### Make Pull\n\n```git\n  $ git pull \"git@github.com:Samuel-Ricardo/js_mastery_clone.git\"\n```\n\n\u003cbr\u003e\n\nThis application use `Docker` so you dont need to install and cofigurate anything other than docker on your machine.\n\n\u003e \u003ca target=\"_blank\" href=\"https://www.docker.com/\"\u003e \u003cimg width=\"48px\" src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-plain-wordmark.svg\" /\u003e \u003c/a\u003e\n\n\u003cbr\u003e\n\nNavigate to project folder `$ cd ./js_mastery/` and run it using `docker-compose`\n\n```bash\n\n  # After setup docker environment just run this commmand on root project folder:\n\n  $ docker-compose up --build   # For First Time run this command\n\n  $ docker-compose up           # to run project\n\n\n```\n\n```bash\n\n  #Apps Running on:\n\n  $ APP: http://localhost:3000\n\n  See more: ./js_mastery/docker-compose.yaml\n\n```\n\n\u003cbr\u003e\n\n#\n\n\u003cbr\u003e\n\n\u003ch2 id=\"author\"\u003e\n  :octocat: | Author:  \n\u003c/h2\u003e\n\n\u003e \u003ca target=\"_blank\" href=\"https://www.linkedin.com/in/samuel-ricardo/\"\u003e \u003cimg width=\"350px\" src=\"https://github.com/Samuel-Ricardo/bolao-da-copa/blob/main/readme_files/IMG_20220904_220148_188.jpg?raw=true\"/\u003e \u003cbr\u003e \u003cp\u003e \u003cb\u003e - Samuel Ricardo\u003c/b\u003e \u003c/p\u003e\u003c/a\u003e\n\n\u003ch1\u003e\n  \u003ca herf='https://github.com/Samuel-Ricardo'\u003e\n    \u003cimg src='https://img.shields.io/static/v1?label=\u0026message=Samuel%20Ricardo\u0026color=black\u0026style=for-the-badge\u0026logo=GITHUB'\u003e \n  \u003c/a\u003e\n  \n  \u003ca herf='https://www.instagram.com/samuel_ricardo.ex/'\u003e\n    \u003cimg src='https://img.shields.io/static/v1?label=\u0026message=Samuel.ex\u0026color=black\u0026style=for-the-badge\u0026logo=instagram'\u003e \n  \u003c/a\u003e\n  \n  \u003ca herf='https://twitter.com/SamuelR84144340'\u003e\n    \u003cimg src='https://img.shields.io/static/v1?label=\u0026message=Samuel%20Ricardo\u0026color=black\u0026style=for-the-badge\u0026logo=twitter'\u003e \n  \u003c/a\u003e\n  \n   \u003ca herf='https://www.linkedin.com/in/samuel-ricardo/'\u003e\n    \u003cimg src='https://img.shields.io/static/v1?label=\u0026message=Samuel%20Ricardo\u0026color=black\u0026style=for-the-badge\u0026logo=LinkedIn'\u003e \n  \u003c/a\u003e\n\u003c/h1\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamuel-ricardo%2Fjs_mastery_clone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsamuel-ricardo%2Fjs_mastery_clone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamuel-ricardo%2Fjs_mastery_clone/lists"}