{"id":14961143,"url":"https://github.com/sylvaincodes/fractal","last_synced_at":"2025-08-19T23:09:15.762Z","repository":{"id":256717952,"uuid":"843928811","full_name":"sylvaincodes/fractal","owner":"sylvaincodes","description":"A full frontend course to become a Nextjs frontend Developer in 2024 ( Beginner friendly )","archived":false,"fork":false,"pushed_at":"2025-03-10T17:25:17.000Z","size":8615,"stargazers_count":56,"open_issues_count":0,"forks_count":20,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-10T02:42:35.430Z","etag":null,"topics":["api","clerkauth","code","cypress","figma","framer-motion","jest","quality-assurance","react","react-testing-library","redux-toolkit","shadcn-ui","stripe","vercel-deployment"],"latest_commit_sha":null,"homepage":"https://fractal-mu-lac.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sylvaincodes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2024-08-17T21:03:15.000Z","updated_at":"2025-03-21T10:56:58.000Z","dependencies_parsed_at":"2025-04-10T02:41:32.389Z","dependency_job_id":"1d379479-e604-4e5c-8b68-a134bde44f6e","html_url":"https://github.com/sylvaincodes/fractal","commit_stats":{"total_commits":46,"total_committers":1,"mean_commits":46.0,"dds":0.0,"last_synced_commit":"7c0f8b624eb57d3f5c6311ed2101b089399ad289"},"previous_names":["sylvaincodes/caldera"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sylvaincodes/fractal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sylvaincodes%2Ffractal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sylvaincodes%2Ffractal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sylvaincodes%2Ffractal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sylvaincodes%2Ffractal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sylvaincodes","download_url":"https://codeload.github.com/sylvaincodes/fractal/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sylvaincodes%2Ffractal/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271236280,"owners_count":24723978,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-19T02:00:09.176Z","response_time":63,"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":["api","clerkauth","code","cypress","figma","framer-motion","jest","quality-assurance","react","react-testing-library","redux-toolkit","shadcn-ui","stripe","vercel-deployment"],"created_at":"2024-09-24T13:23:58.500Z","updated_at":"2025-08-19T23:09:15.729Z","avatar_url":"https://github.com/sylvaincodes.png","language":"TypeScript","funding_links":["https://www.patreon.com/sylvaincodes"],"categories":[],"sub_categories":[],"readme":"## ✔️ Introduction\n\nYou are $${\\color{green}new}$$  to $${\\color{green}React}$$  and ready to $${\\color{yellow} learn }$$ Next Js This course is definitely for you. I made everything $${\\color{green}easier}$$  to help you learn step by step all the frontend development with NextJs.\n\nYou will start from the basics concepts of Nextjs then you will grow up by learning responsive design with TailwindCss and Nextjs from a Figma Design template and so much more.\n\n\n\u003cimg src=\"./public/assets/images/og.png\"/\u003e\n\n# Become a Frontend NextJs Developer - Full Course.\n\nThis is how the project looks:\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003ca href='./public/assets/images/home.png'\u003e\u003cimg src=\"./public/assets/images/home.png\" style=\"width: 300px\"/\u003e\u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ca href='./readme/assets/images/products_list.png'\u003e\u003cimg src=\"./public/assets/images/products_list.png\" style=\"width: 300px\"/\u003e\u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ca href='./public/assets/images/product_detail.png'\u003e\u003cimg src=\"./public/assets/images/product_detail.png\" style=\"width: 300px\"/\u003e\u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\n\n## 🎯 What skills you will learn  \n\nThroughout this course, you will improve your technical frontend skill set such as:\n\n- Proficiency in JavaScript (ES6+), React.js, and Next.js framework.\n\n- Knowledge of  React Components, State Management, and Hooks;\n\n- Experience with server-side rendering (SSR), static site generation (SSG), client-side rendering, etc.;\n\n- Experience with RESTful APIs and efficient methods of requesting data from backend servicesetc...;\n\n- Experience with CSS Framework  (Tailwindcss) and the principles of responsive web design;\n\n- Experience with version control systems (Git)\n\n- Experience with testing frameworks (Jest,React testing library, Cypress) and experience with code quality tools;\n\n- Basic knowledge of web performance optimization techniques and the principles of an accessible web.\n\n\n## ✅ Prerequisite knowledge\n\nThis tutorial assumes knowledge of HTML, CSS, JavaScript, and no knowledge of React or NextJs.\n\n\n## ✅ System requirements\n\n- Before you start this course, make sure you have the following installed:\n\n- Node.js 20.12.0 or later installed.\n\n- Operating systems: macOS, Windows (including WSL), or Linux.\n\n- VSCode or another text editor of your choice.\n\n\n## 📚 Get the Brand File \n\n[Pdf File ](https://mega.nz/file/OUFiHKgD#C0_OebdaCO6C_2EP0NYaPyqpVKXnjq8wNBi94p3FVqw)\n\n[Figma File ](https://www.figma.com/design/1PgX87mEwDbaDZbfV6CSIe/Style-Guide-Template-(Color-Styles-%26-Typography)-(FRACTAL)?node-id=0-1\u0026t=hlK4Mf8kf0G5Dl56-0)\n\n\u003cimg src=\"./public/assets/images/brand.png\"/\u003e\n\n\n\n## 📅 Code organization and folder structure\n\nThe project contains all Next.js App Router pages and layouts, and takes care of the routing.\n\n```\n.\n├───actions\n├───app                 \n│   └───(website)\n│       ├───(auth)\n│       │   ├───sign-in\n│       │   │   └───[[...sign-in]]\n│       │   └───sign-up\n│       │       └───[[...sign-up]]\n│       └───(pages)\n│           ├───(home)\n│           ├───account\n│           │   ├───address\n│           │   ├───dashboard\n│           │   └───orders\n│           ├───cart\n│           ├───categories\n│           │   └───[slug]\n│           │       └───products\n│           ├───checkout\n│           ├───order\n│           │   └───[id]\n│           └───products\n│               └───[slug]\n├───components\n│   ├───custom\n│   ├───modules\n│   │   └───website\n│   │       ├───account\n│   │       ├───cart\n│   │       ├───categories\n│   │       ├───Chechout\n│   │       ├───footer\n│   │       ├───header\n│   │       ├───home\n│   │       ├───order\n│   │       ├───Product\n│   │       ├───products\n│   │       └───review\n│   └───ui\n├───constants\n├───cypress\n│   ├───e2e\n│   ├───fixtures\n│   ├───pages\n│   ├───selectors\n│   └───support\n├───data\n├───hooks\n├───lib\n├───providers\n├───public\n│   └───assets\n│       └───images\n├───store\n├───types\n└───_tests_\n    └───ui\n\n```\n\nThis structure enables efficient routing and organization of different parts of the app.\n\n### `/actions` **directory**\n\nThis folder contains asynchronous functions that are executed on the server. They can be called in Server and Client Components to handle form submissions and data mutations in Next.js applications.\n\n### `/app` **directory**\n\nThis folder is the Root directory of the app. it is also known as the app router.\nIt supports shared layouts, nested routing, loading states, error handling, and more.\n\n```\n\n  (website)    \n    ├───(auth)   \n    │   │   layout.tsx\n    │   │   \n    │   │\n    │   ├───sign-in\n    │   │   └───[[...sign-in]]\n    │   │           page.tsx\n    │   │\n    │   └───sign-up\n    │       └───[[...sign-up]]\n    │               page.tsx\n    │\n    └───(pages)\n    │   │   layout.tsx\n    │   │ \n    │   │\n    │   ├───(home)\n    │   │       page.tsx\n    │   │\n    │   ├───account\n    │   │   │   layout.tsx\n    │   │   │ \n    │   │   │\n    │   │   ├───address\n    │   │   │       page.tsx\n    │   │   │\n    │   │   ├───dashboard\n    │   │   │       page.tsx\n    │   │   │\n    │   │   └───orders\n    │   │           page.tsx\n    │   │\n    │   ├───cart\n    │   │       page.tsx\n    │   │\n    │   ├───categories\n    │   │   └───[slug]\n    │   │       └───products\n    │   │               page.tsx\n    │   │\n    │   ├───checkout\n    │   │       page.tsx\n    │   │\n    │   ├───order\n    │   │   └───[id]\n    │   │           page.tsx\n    │   │\n    │   └───products\n    │        │   page.tsx\n    │        │\n    │        └───[slug]\n    │                page.tsx\n\n```\n\n\n### File conventions \n\nNext.js provides a set of special files to create UI with specific behavior in nested routes such as \n \n\n### `layout.tsx`\n\nThat is shared between multiple routes. On navigation, layouts preserve state, remain interactive, and do not re-render. \nYou can define a layout by default exporting a React component from a layout.js file. The component should accept a children prop that will be populated with a child layout (if it exists) or a page during rendering\n\nBy default, layouts are nested, which means they wrap child layouts via their children prop. \n\n\n### `error.tsx`\n\nIn Next js Errors can be divided into two categories: expected errors and unexpected  exceptions:\nExpected errors can be handled with try or catch and UseActionState.\nBut uncaught exceptions is handled by using error.tsx and global-error.tsx files\n\nunexpected errors that indicate bugs or issues that should not occur during the normal flow of your application.\n\nin other words, Next.js uses error boundaries to handle unexpected exceptions. it catches errors and shows a fallback UI instead of the component tree that crashed.\n\n\n### `globals.css`\n\nThis is the main css file of the application. You can use this file to add CSS rules to all the routes in your application - such as CSS reset rules, site-wide styles for HTML elements like links, and more.\n\n\n### `fonts.tsx`\n\nit allows you to create custom fonts with next/font.\nNext.js automatically optimizes fonts in the application when you use the next/font module. It downloads font files at build time there are no additional network requests for fonts which would increase performance.\n\n\n### `loading.tsx`\n\nThe loading file is a special file that can be nested.\nit allows you to create fallback UI to show as a replacement while page content loads.\n\n\n### Metadat files: `manifest.ts`, `robots.ts`, `sitemap.ts`\n\nNext has some special files like manifest, robot , sitemap .\nEach file convention can be defined using a static file (e.g. manifest.xml), or a dynamic variant that uses code to generate the file for example manifest.ts \n\n\n### `(Website)` **directory**\n\nIn the app directory, nested folders are normally mapped to URL paths. However, you can mark a folder as a Route Group to prevent the folder from being included in the route's URL path.\n\nThis allows you to organize your route segments and project files into logical groups without affecting the URL path structure.\nA route group can be created by wrapping a folder's name in parenthesis like this: (folderName)\n\nThis folder contains all the routes and javascript files needed to build frontend app.\n\nWe have:\n\n\n### `(auth)` **directory**:\n\nThis group route is used to organize clerk authentification routes like sign-in and sign-up\n\n\n### `(pages)` **directory**:\n\nThis group is used to organize all frontend routes\n\n\n###  `components` **directory**\n\nthis folder contains three folders custom, modules and ui\n\n1. Custom **directory** \n\nthis folder contains react components  which are independent and reusable.\n\n2. Module  **directory**\n\nThis folders contains wrapper components:\nA wrapper components are components that surround unknown components and provide a default structure to display the child components.\n\n\n3. ui  **directory**\n\nThis folders contains react components  which are  independent and reusable created by a third party like shadcn UI \n\n###  `constants`  **directory**\n\nWe use this folder to create static constantes \n\n\n###  `_tests_`  **directory**\n\nThis is the directory that Jest will use to look up tests.\n\n\n### `cypress`  **directory**\n\nThis is the root directory where Cypress-related files and folders are stored.\n\n```\n├───e2e\n├───fixtures\n├───pages\n├───selectors\n└───support\n\n```\n\n1. e2e  **directory**\n\nThis directory is where you should place your test files. Cypress will automatically detect and run tests from this folder. Test files typically have .spec.ts or .test.ts file extension.\n\n2. fixtures **directory**\n\nYou can use this directory to store static data or fixture files that your tests might need, such as JSON, CSV, or text files.\n\n3. pages  **directory**\n\nYou can use this directory to create object page models.\nThe Page Object Model (POM) is a design pattern commonly used in software testing, specifically in the context of test automation for web applications. It helps in creating an organized and maintainable structure for test scripts by encapsulating the details of the web pages and their elements.\n\n\n3. selectors  **directory**\n\nYou can use this directory to group all selector for every pages for testing.\neach file contains all selectors needed to perform test for a specific page\n\n\n###  `hooks`  **directory**\n\nthis folders contains all custom hooks which will be used on client components\n\n\n###  `lib` **directory**\n\nthis folder contains all the utility functions. \n\n\n###  `providers` **directory**\n\nThis folder is kind of root folder for third party library. it is used to wrap all those libraries which is needed throughout the app\n\n\n###  `public` **directory**\n\nThis folder serve static assets, like images, fonts files. \n\n\n###  `store` **directory**\n\nThis folder contains state management files for redux toolkit.\n\n\n###  `types` **directory**\n\nall types we are going to create should be stored in that folder\n\n\n###  `ènv files`\n\nNext.js comes with built-in support for environment variables, which allows you to create multiple environments variables :\n\nNext.js allows you to set defaults in .env (all environments), .env.development (development environment), and .env.production (production environment) .env.testing (production environment).\n\n1.  `gitignore`\n2.  `babel.config`\n3.  `cypress.config`\n4.  `eslint.config`\n\n5.  `jest files`\n\n*jest.config.ts* is the default jest config file : it defines Jest configurations.\n\non the other hand *jest.setup.ts* configuration which are supposed to run before every test case.\n\n1.  `middleware`\n2.  `next.config`\n3.  `package-lock`\n4.  `postcss`\n5.  `README`\n6.  `tailwind`\n7.  `tsconfig`\n\n## Quick start\n\nTo spin up this example loccaly, follow these steps\n\n### Clone\n\nUse the ` git clone ` CLI to clone template directly  to your machine\n\n\n### Run project on local\n\n```bash\n    npm install\n```\n\n## Project Dev Steps\n\n1. Environment Setup\n   \n   Create a env file on the root of project\n   PUT THIS INSIDE\n\n```bash\n\n    NEXT_PUBLIC_SERVER_URL=http://localhost:3000\n    NEXT_PUBLIC_API_URL=https://fractal-api-zeta.vercel.app\n\n    # Clerk integration \n    NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=\n    CLERK_SECRET_KEY=\n\n    # Stripe integration \n    NEXT_PUBLIC_STRIPE_CLIENT_KEY=\n    STRIPE_SECRET_KEY=\n    \n```\n\n2.  Project Folders \u0026 Files Structure\n\n3.  Setup Eslint \u0026 typscript\n   \n4.  Setup Jest\n\n```bash\n\n    # create jest config file \n    npm init jest@latest\n\n    npm install --save-dev jest jest-environment-jsdom @testing-library/dom @testing-library/jest-dom \n    npm install --save-dev @testing-library/react@latest --legacy-peer-deps\n\n     #Add to script in package json\n    \"test\": \"jest\",\n    \"test:watch\": \"jest --watch\"  \n\n    #add this to jest.config\n    import nextJest from \"next/jest.js\";\n   \n    # // Provide the path to your Next.js app to load next.config.js and .env files in your test environment\n    const createJestConfig = nextJest({\n     dir: './',\n    })\n\n\n    # // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async\n    export default createJestConfig(config)\n\n\n\n# or\n\n```\n\n5. Setup Cypress\n\n```bash\n    #install\n    npm install cypress --save-dev\n    \n    #add to pakage json\n    \"start:test\": \"cross-env NODE_ENV=test \u0026\u0026 next build \u0026\u0026 next start\",\n    \"cypress:open\": \"cross-env NODE_ENV=test cypress open\",\n    \"cypress:start\": \"start-server-and-test 'npm run start:test' 3000 'npm run cypress:open'  \"\n\n    #lauch \n    npm run cypress:open\n\n    #Some files will be created;\n    #add base url localhost to cypress.config\n    baseUrl: \"http://localhost:3000\",\n\n```\n    \n6. Setup ShadCn and Some Libraries\n\n```bash\n    #install\n    npx shadcn-ui@latest init\n    npm i framer-motion react-hot-toast react-icons\n\n\n```\n\n7. Setup Frontend UI Kit ( Colors - Fonts - Container )\n\n  - Setup Container screens\n\n  ```bash\n\n    screens: {\n        xs: \"360px\",\n        # =\u003e @media (min-width: 360px) { ... }\n\n        sm: \"575px\",\n        # =\u003e @media (min-width: 575px) { ... }\n\n        md: \"768px\",\n        # =\u003e @media (min-width: 768px) { ... }\n\n        lg: \"1024px\",\n        # =\u003e @media (min-width: 1024px) { ... }\n\n        xl: \"1280px\",\n        # =\u003e @media (min-width: 1280px) { ... }\n\n        \"2xl\": \"1440px\",\n        # =\u003e @media (min-width: 1536px) { ... }\n\n        \"3xl\": \"1680px\",\n        # =\u003e @media (min-width: 1536px) { ... }\n\n        \"4xl\": \"1920px\",\n        # =\u003e @media (min-width: 1536px) { ... }\n      },\n\n  ```\n\n  - Setup layout for pages \n  \n  ```bash\n\n  import React from \"react\";\n  import Container from \"@/components/custom/Container\";\n\n  export default function layout() {\n    return (\n      \u003cdiv className=\"border border-black\"\u003e\n        \u003cContainer\u003eset up responsive layout\u003c/Container\u003e\n      \u003c/div\u003e\n    );\n  }\n  \n  ```\n  \n   - Setup padding for screens \n  \n  ```bash\n\n  import React from \"react\";\n  import Container from \"@/components/custom/Container\";\n\n  export default function layout() {\n    return (\n      \u003cdiv className=\"border border-black\"\u003e\n        \u003cContainer\u003eset up responsive layout\u003c/Container\u003e\n      \u003c/div\u003e\n    );\n  }\n  \n  ```\n  \n  \n  - Setup colors \n  \n  ```bash\n\n      #inspirations website\n      https://tailwindcss.com/docs/customizing-colors\n\n      https://coolors.co\n\n      https://uicolors.app/create\n  \n  ```\n\n8. Create  Home UI\n\n  - Header component\n  \n  ```bash\n  \n  ```\n\n9. Create  Product page UI\n\n10. Create  Product Detail  UI\n\n11. Create  Cart UI\n\n12. Create  Checkout UI\n\n13. Create  Payment UI\n\n14. Create  Dashoard UI\n\n15. Fixing bug \n\n16. Test Jest \n\n17. Test Cypress \n\n28. Deploy \n\n\n## How to join me\n\n- Patreon chat: [Patreon](https://www.patreon.com/sylvaincodes)\n- Youtube comment: [Youtube](https://www.youtube.com/@sylvaincodes593)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsylvaincodes%2Ffractal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsylvaincodes%2Ffractal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsylvaincodes%2Ffractal/lists"}