{"id":20821584,"url":"https://github.com/gragland/divjoy-next-vercel","last_synced_at":"2025-05-07T16:24:18.149Z","repository":{"id":41649754,"uuid":"216392984","full_name":"gragland/divjoy-next-vercel","owner":"gragland","description":"A React starter powered by Next.js, Firebase, Bulma, and Vercel 👌","archived":false,"fork":false,"pushed_at":"2023-01-07T17:52:24.000Z","size":891,"stargazers_count":58,"open_issues_count":16,"forks_count":10,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-31T11:51:11.406Z","etag":null,"topics":["boilerplate","bulma","firebase","firestore","nextjs","react","template","vercel"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/gragland.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}},"created_at":"2019-10-20T16:35:44.000Z","updated_at":"2025-03-31T09:16:41.000Z","dependencies_parsed_at":"2023-02-07T19:16:06.754Z","dependency_job_id":null,"html_url":"https://github.com/gragland/divjoy-next-vercel","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gragland%2Fdivjoy-next-vercel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gragland%2Fdivjoy-next-vercel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gragland%2Fdivjoy-next-vercel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gragland%2Fdivjoy-next-vercel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gragland","download_url":"https://codeload.github.com/gragland/divjoy-next-vercel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252913691,"owners_count":21824234,"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":["boilerplate","bulma","firebase","firestore","nextjs","react","template","vercel"],"created_at":"2024-11-17T22:12:36.241Z","updated_at":"2025-05-07T16:24:18.095Z","avatar_url":"https://github.com/gragland.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### This is an example codebase created with [Divjoy](https://divjoy.com/?utm_campaign=github-divjoy-next-vercel\u0026utm_source=github\u0026utm_medium=website\u0026utm_content=brand) ✨\u003cbr/\u003e\n\n⚠️ You must [purchase a license](https://divjoy.com/?utm_campaign=github-divjoy-next-vercel\u0026utm_source=github\u0026utm_medium=website\u0026utm_content=purchase) to use this code\n\n⚠️ The code in this repo is not up-to-date. Head over to [Divjoy](https://divjoy.com/?utm_campaign=github-divjoy-next-vercel\u0026utm_source=github\u0026utm_medium=website\u0026utm_content=purchase) to generate a new Next.js + Vercel project.\n\n\u003chr/\u003e\n\n## 👉 Get Started\n\nInstall dependencies\n\n```\nnpm install\n```\n\nUpdate your `.env` file with values for each environment variable\n\n```\nAPI_KEY=AIzaSyBkkFF0XhNZeWuDmOfEhsgdfX1VBG7WTas\netc ...\n```\n\nRun the development server\n\n```\nnpm run dev\n```\n\nWhen the above command completes you'll be able to view your website at `http://localhost:3000`\n\n## 🥞 Stack\n\nThis project uses the following libraries and services:\n\n- Framework - [Next.js](https://nextjs.org)\n- UI Kit - [Bulma](https://bulma.io)\n- Authentication - [Firebase Auth](https://firebase.google.com/products/auth)\n- Database - [Cloud Firestore](https://firebase.google.com/products/firestore)\n- Newsletter - [Mailchimp](https://mailchimp.com)\n- Contact Form - [Formspree](https://formspree.io)\n- Analytics - [Google Analytics](https://googleanalytics.com)\n- Hosting - [Vercel](https://vercel.com)\n\n## 📚 Guide\n\n  \u003cdetails\u003e\n    \u003csummary\u003e\u003cb\u003eStyles\u003c/b\u003e\u003c/summary\u003e\n    \u003cp\u003e\n      You can edit Bulma SASS variables in the global stylesheet located at \u003ccode\u003e\u003ca href=\"src/styles/global.scss\"\u003esrc/styles/global.scss\u003c/a\u003e\u003c/code\u003e. Variables allow you to control global styles (like colors and fonts), as well as element specific styles (like button padding). Before overriding Bulma elements with custom style check the \u003ca href=\"https://bulma.io/documentation\"\u003eBulma docs\u003c/a\u003e to see if you can do what need by tweaking a SASS variable.\n    \u003c/p\u003e\n    \u003cp\u003e\n      Custom styles are located in their related component's directory. For example, if any custom style is applied to the Navbar component you'll find it in \u003ccode\u003esrc/components/Navbar.scss\u003c/code\u003e. We ensure custom styles are scoped to their component by prepending the classname with the component name (such as \u003ccode\u003e.Navbar__brand\u003c/code\u003e). This ensures styles never affect elements in other components. If styles need to be re-used in multiple components consider creating a new component that encapsulates that style and structure and using that component in multiple places.\n    \u003c/p\u003e\n  \u003c/details\u003e\n\n  \u003cdetails\u003e\n    \u003csummary\u003e\u003cb\u003eRouting\u003c/b\u003e\u003c/summary\u003e\n    \u003cp\u003e\n      This project uses the built-in Next.js router and its convenient \u003ccode\u003euseRouter\u003c/code\u003e hook. Learn more in the \u003ca target=\"_blank\" href=\"https://github.com/zeit/next.js/#routing\"\u003eNext.js docs\u003c/a\u003e.\n    \n    ```jsx\n    import Link from 'next/link';\nimport { useRouter } from 'next/router';\n\n    function MyComponent(){\n      // Get the router object\n      const router = useRouter();\n\n      // Get value from query string (?postId=123) or route param (/:postId)\n      console.log(router.query.postId);\n\n      // Get current pathname\n      console.log(router.pathname)\n\n      // Navigate with the \u003cLink\u003e component or with router.push()\n      return (\n        \u003cdiv\u003e\n          \u003cLink href=\"/about\"\u003e\u003ca\u003eAbout\u003c/a\u003e\u003c/Link\u003e\n          \u003cbutton onClick={(e) =\u003e router.push('/about')}\u003eAbout\u003c/button\u003e\n        \u003c/div\u003e\n      );\n    }\n    ```\n    \u003c/p\u003e\n\n  \u003c/details\u003e\n\n  \u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eAuthentication\u003c/b\u003e\u003c/summary\u003e\n\u003cp\u003e\n  This project uses \u003ca href=\"https://firebase.google.com\"\u003eFirebase Auth\u003c/a\u003e and includes a convenient \u003ccode\u003euseAuth\u003c/code\u003e hook (located in \u003ccode\u003e\u003ca href=\"src/util/auth.js\"\u003esrc/util/auth.js\u003c/a\u003e\u003c/code\u003e) that wraps Firebase and gives you common authentication methods. Depending on your needs you may want to edit this file and expose more Firebase functionality.\n\n```js\nimport { useAuth } from './../util/auth.js';\n\nfunction MyComponent(){\n  // Get the auth object in any component\n  const auth = useAuth();\n\n  // Depending on auth state show signin or signout button\n  // auth.user will either be an object, null when loading, or false if signed out\n  return (\n    \u003cdiv\u003e\n      {auth.user ? (\n        \u003cbutton onClick={(e) =\u003e auth.signout()}\u003eSignout\u003c/button\u003e\n      ) : (\n        \u003cbutton onClick={(e) =\u003e auth.signin('hello@divjoy.com', 'yolo')}\u003eSignin\u003c/button\u003e\n      )}\n    \u003c/div\u003e\n  );\n}\n```\n\n\u003c/p\u003e\n\u003c/details\u003e\n  \n  \u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eDatabase\u003c/b\u003e\u003c/summary\u003e\n\n\u003cp\u003e\n  This project uses \u003ca href=\"https://firebase.google.com/products/firestore\"\u003eCloud Firestore\u003c/a\u003e and includes some data fetching hooks to get you started (located in \u003ccode\u003e\u003ca href=\"src/util/db.js\"\u003esrc/util/db.js\u003c/a\u003e\u003c/code\u003e). You'll want to edit that file and add any additional query hooks you need for your project.\n\n```js\nimport { useAuth } from './../util/auth.js';\nimport { useUser } from './../util/db.js';\n\nfunction MyComponent(){\n  const auth = useAuth();\n\n  // Fetch extra user info from database\n  // It's okay if uid is undefined while auth is still loading\n  // The hook will return a \"loading\" status until it has a uid to fetch data\n  const uid = auth.user ? auth.user.uid : undefined;\n  const { data: user, status } = useUser(uid);\n\n  // Once we have the user data then display their name\n  return (\n    \u003cdiv\u003e\n      {status === \"loading\" ? (\n        \u003cspan\u003eOne moment please\u003c/span\u003e\n      ) : (\n        \u003cspan\u003eHello {user.name}\u003c/span\u003e\n      )}\n    \u003c/div\u003e\n  );\n}\n```\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n  \u003cdetails\u003e\n    \u003csummary\u003e\u003cb\u003eDeployment\u003c/b\u003e\u003c/summary\u003e\n    \u003cp\u003e\n    Install the Vercel CLI\n\n```\nnpm install -g vercel\n```\n\nAdd each variable from `.env` to your Vercel project with the following command. You'll be prompted to enter its value and then choose one or more environments (development, preview, or production).\n\u003ca target=\"_blank\" href=\"https://vercel.com/docs/v2/build-step#environment-variables\"\u003eLearn more here\u003c/a\u003e.\n\n```\nvercel env add VARIABLE_NAME\n```\n\nRun this command to deploy a preview (for testing a live deployment)\n\n```\nvercel\n```\n\nRun this command to deploy to production\n\n```\nvercel --prod\n```\n\nSee the \u003ca target=\"_blank\" href=\"https://vercel.com/docs/v2/platform/deployments\"\u003eVercel docs\u003c/a\u003e for more details.\n\u003c/p\u003e\n\n  \u003c/details\u003e\n\n  \u003cdetails\u003e\n    \u003csummary\u003e\u003cb\u003eOther\u003c/b\u003e\u003c/summary\u003e\n    \u003cp\u003e\n      The \u003ca href=\"https://github.com/zeit/next.js\"\u003eNext.js documentation\u003c/a\u003e covers many other topics.\n      This project was initially created using \u003ca href=\"https://divjoy.com?ref=readme_other\"\u003eDivjoy\u003c/a\u003e, a React codebase generator. Feel free to ask questions in the \u003ca href=\"https://spectrum.chat/divjoy\"\u003eDivjoy forum\u003c/a\u003e and we'll do our best to help you out.\n    \u003c/p\u003e\n  \u003c/details\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgragland%2Fdivjoy-next-vercel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgragland%2Fdivjoy-next-vercel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgragland%2Fdivjoy-next-vercel/lists"}