{"id":22559690,"url":"https://github.com/taurusilver7/just4you","last_synced_at":"2025-03-28T12:12:11.004Z","repository":{"id":181445544,"uuid":"585666874","full_name":"taurusilver7/just4you","owner":"taurusilver7","description":"A react-tailwindcss static promotional fitness application main page.","archived":false,"fork":false,"pushed_at":"2023-12-09T18:19:47.000Z","size":7641,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-02T12:35:50.524Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://just4you-smoky.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/taurusilver7.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":"2023-01-05T19:00:37.000Z","updated_at":"2023-01-05T19:29:51.000Z","dependencies_parsed_at":"2025-02-02T12:34:50.479Z","dependency_job_id":"8fad728d-3a4a-43c0-ad35-a2da80abd5b4","html_url":"https://github.com/taurusilver7/just4you","commit_stats":null,"previous_names":["taurusilver7/just4you"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taurusilver7%2Fjust4you","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taurusilver7%2Fjust4you/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taurusilver7%2Fjust4you/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taurusilver7%2Fjust4you/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/taurusilver7","download_url":"https://codeload.github.com/taurusilver7/just4you/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246026110,"owners_count":20711581,"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","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-12-07T21:07:59.232Z","updated_at":"2025-03-28T12:12:10.983Z","avatar_url":"https://github.com/taurusilver7.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Just 4 You\n\n\u003e A React-Typescript based single-page fitness application.\n\n![just4you](https://www.linkpicture.com/q/jsut4you.png)\n\nThere will be Typescript elements, and a lot of layout fundamentals to go with while building a SPA.\n\nWe will be using [Typescript](https://www.typescriptlang.org/), [React](https://reactjs.org/docs/getting-started.html) framework, [Vite](https://vitejs.dev/guide/) starter pack, [Framer motion](https://www.framer.com/docs/) for animation, [tailwindcss](https://tailwindcss.com/docs/installation) for styling.\n\nThe SPA is deployed on [Cloudflre](https://dash.cloudflare.com/)\n\n## Scripts\n\n```bash\nnpm create vite@latest \u003capp_name\u003e --template typescript\n#and\nyarn dev\n#and\nyarn add framer-motion react-anchor-link-smooth-scroll @heroicons/react (dependencies)\n# and\nyarn add @types/react @types/react-anchor-links-smooth-scroll@1.0.2 @types/node -D (dev dependencies)\n\n```\n\n## Build\n\n- Initial Setup\n\nScaffold a starter template and refactor the file structure to suit the necessary.\n\nSet up the `vite.config.ts`. Import path package and restructure an alias for the components path in src directory. Replace the /src directory with a keyword '@' to an absolute path.\n\nConfigure the `tsconfig.json` object. Set the paths in the configure file to take effect immediately.\n\n`\"paths\": {\n\t\t\t\"@/*\": [\"./src/*\"]\n\t\t},\n`\n\nInstall and configure tailwind [setup](https://tailwindcss.com/docs/guides/vite) \u0026 add suitable extensions to work with tailwindcss utility classes. Add `Tailwind documentation` and `Tailwind CSS Intellisense`\n\n```bash\nyarn add tailwindcss postcss autoprefixer -D\n# and\nnpx tailwindcss init -p (creates two config files)\n\n```\n\nAdd a `prettier` \u0026 `prettier-plugin-tailwindcss` dev dependencies to the build. This plugin formats tailwind utility classes in a particular way.\n\nCreate a prettier-plugin exports configure file, and configure the tailwind configure file by adding custom color \u0026 styling data.\n\nSet the [font](https://fonts.google.com/specimen/Montserrat?query=monts) and set the default font-family for the application.\n\n- Build\n\n* Navbar\n\nCreate a Navbar component in /scenes directory. Populate \u0026 style the standard business navbar regarding mobile \u0026 desktop resolution.\n\nUse pesticide chrome widget, and react-anchor-links-smooth-scroll dependency to create a link component. Use props, states to populate the nav menu elements dynamically.\n\nCreate a selected page state in main component \u0026 pass it down to the Navbar \u0026 Link component to redirect the links to their respective sub-sections in the main page.\n\nCreate an enum to describe the nav-menu elements to make them more dynamical and their types more explicit. Modify the props in Navbar, Link components to that of the enum for a error-free reusable components.\n\nCreate a custom hook to manually set the media query breakpoint for larger screen resolutions.\n\nCreate a custom button component to add to the navbar menu. Populate the mobile version of the navmenu \u0026 style the nav menus. Build the sidebar underneath the desktop-version navbar with a condition for screen resolution.\n\nCreate a custom dynamic navbar background on scrolling \u0026 style it for a different background color on the navbar.\n\n* Home\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaurusilver7%2Fjust4you","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftaurusilver7%2Fjust4you","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaurusilver7%2Fjust4you/lists"}