{"id":23278753,"url":"https://github.com/jimmylee/www-react-postgres","last_synced_at":"2025-08-21T11:31:43.385Z","repository":{"id":44336912,"uuid":"443186419","full_name":"jimmylee/www-react-postgres","owner":"jimmylee","description":"[2022] [OUTDATED] A template for React, Postgres and various Web3 integrations.","archived":false,"fork":false,"pushed_at":"2024-01-09T20:51:56.000Z","size":54,"stargazers_count":47,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-08T09:01:42.082Z","etag":null,"topics":["metamask","phantom","postgres","react","web2","web3"],"latest_commit_sha":null,"homepage":"","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/jimmylee.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":"2021-12-30T21:16:03.000Z","updated_at":"2025-02-05T00:14:56.000Z","dependencies_parsed_at":"2022-09-13T22:30:14.652Z","dependency_job_id":null,"html_url":"https://github.com/jimmylee/www-react-postgres","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/jimmylee/www-react-postgres","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jimmylee%2Fwww-react-postgres","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jimmylee%2Fwww-react-postgres/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jimmylee%2Fwww-react-postgres/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jimmylee%2Fwww-react-postgres/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jimmylee","download_url":"https://codeload.github.com/jimmylee/www-react-postgres/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jimmylee%2Fwww-react-postgres/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271470130,"owners_count":24765325,"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-21T02:00:08.990Z","response_time":74,"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":["metamask","phantom","postgres","react","web2","web3"],"created_at":"2024-12-19T22:34:30.297Z","updated_at":"2025-08-21T11:31:43.101Z","avatar_url":"https://github.com/jimmylee.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## DEPRECATION NOTICE\n\nThis template is no longer up to date. For an updated template, either as a team or individually, we encourage you to explore our [latest template](https://github.com/internet-development/nextjs-sass-starter) produced by [INTDEV](https://internet.dev). Thank you for your interest in our work! \n\n# WWW-REACT-POSTGRES\n\n\u003cimg width=\"1239\" alt=\"www-react-postgres\" src=\"https://user-images.githubusercontent.com/310223/148035171-79958937-3aee-47b6-b182-0bbf9e246995.png\"\u003e\n\n#### What is this for?\n\nThis template is for \n\n- making a React website\n- making a React web application with a database\n\nIf you are a beginner and you just want to make a simple React project with no database, try [next-sass](https://github.com/application-research/next-sass).\n\n#### Why would I use this?\n\nYou want to...\n\n- use [React](https://reactjs.org/).\n- use [SASS](https://sass-lang.com/), like the good old days.\n- use [https://nextjs.org/](NextJS) and `dotenv` for things like server side rendering and obfuscating secrets on a server.\n  - You should never expose client secrets in the browser.\n- use Postgres 14 (latest as of June 19th, 2022) to manage local data or local authentication.\n- have templated SEO metatags.\n- get the minimum code involved to make a production website\n- **[OPTIONAL]** start with a [Google Authentication](https://github.com/googleapis/google-api-nodejs-client) example to create.\n  - start with an example of \"organizations\", each organization is created with an e-mail's domain name.\n- **[OPTIONAL]** authenticate your Ethereum addresses from [Metamask](https://metamask.io/) to build a DAPP or DAO. This example keeps a table of Ethereum addresses where you can store local information in the `jsonb` column.\n  - You'll need your own strategy for joining your Ethereum address to your local account.\n- **[OPTIONAL]** authenticate your Solana address (public key) from [Phantom](https://phantom.app) to build a DAPP or DAO. This example keeps a table of Solana addresses where you can store local information in the `jsonb` column.\n  - You'll need your own strategy for joining your Solana address to your local account.\n\n## Setup (MacOS)\n\nAll steps assume you have\n\n- installed [Homebrew](https://brew.sh/) \n- installed [iTerm](https://iterm2.com/), because you will need multiple terminal windows open.\n\n#### Step 1\n\nClone this repository!\n\n#### Step 2\n\nCreate an `.env` file in your project root.\n\n```sh\nJWT_SECRET=74b8b454-29a6-4282-bdec-7e2895c835eb\nSERVICE_PASSWORD_SALT=\\$2b\\$10\\$JBb8nz6IIrIXKeySeuY3aO\nPASSWORD_ROUNDS=10\n```\n\n- Generate your own `SERVICE_PASSWORD_SALT` with `BCrypt.genSaltSync(10)`. \n  - You need to use `\\` to escape the `$` values as shown above. Also make sure you're using the correct amount of rounds.\n- Generate your own `JWT_SECRET`.\n\n#### **[OPTIONAL]** Step 3\n\nTo get google auth support to work, add the following to your `.env` file in your project root directory.\n\n```sh\nGOOGLE_CLIENT_ID=GET_ME_FROM_GOOGLE\nGOOGLE_CLIENT_SECRET=GET_ME_FROM_GOOGLE\nGOOGLE_REDIRECT_URIS=http://localhost:3005/google-authentication\n```\n\n- Obtain `GOOGLE_CLIENT_ID` and `GOOGLE_CLIENT_SECRET` from [https://console.developers.google.com](https://console.developers.google.com) after you setup your application.\n- Enable [People API](https://console.developers.google.com/apis/api/people.googleapis.com/overview). Otherwise Google Auth will not work for this example.\n- Use `CMD+F` to find `GOOGLE_REDIRECT_URIS` in `@data/environment`. Google needs this string for the **Authorized redirect URIs** setting. The default is: `http://localhost:3005/google-authentication`.\n\n#### Step 4\n\nInstall Postgres 14 locally\n\n```sh\nbrew uninstall postgresql\nbrew install postgresql\nbrew link postgresql --force\n```\n\nAt the time of writing this (June 19th, 2022), `postgresql` is version 14.\n\nIf you see\n\n```sh\n# already linked, don't worry, nothing to worry about\n\nWarning: Already linked: /usr/local/Cellar/postgresql/14.4\nTo relink, run:\n  brew unlink postgresql \u0026\u0026 brew link postgresql\n\n# run brew postgresql-upgrade-database\n\nPostgres - FATAL: database files are incompatible with server\n```\n\nEverything is fine.\n\nNext make sure NodeJS version 10+ is installed on your machine.\n\n```sh\nbrew install node\n```\n\nInstall dependencies\n\n```sh\nnpm install\nnpm run dev\n```\n\n#### Step 5\n\nRun Postgres 14.\n\nI prefer the option to start and stop postgres through the command line. \n- If you have another way of doing things, just make sure your port is set to `1334`.\n\nIn a seperate terminal tab run\n\n```sh\npostgres -D /usr/local/var/postgres -p 1334\n```\n\nNow your development environment is setup.\n\n#### Step 5\n\nYou need to create a user named `admin` and database named `wwwdb`.\n\n```sh\n# Enter Postgres console\npsql postgres -p 1334\n\n# Create a new user for yourself\nCREATE ROLE admin WITH LOGIN PASSWORD 'oblivion';\n\n# Allow yourself to create databases\nALTER ROLE admin CREATEDB;\n\n# You need to do this to install uuid-ossp in a later step\nALTER USER admin WITH SUPERUSER;\n\n# Exit Postgres console\n\\q\n\n# Log in as your new user.\npsql postgres -p 1334 -U admin\n\n# Create a database named: nptdb.\n# If you change this, update knexfile.js\nCREATE DATABASE wwwdb;\n\n# Give your self privileges\nGRANT ALL PRIVILEGES ON DATABASE wwwdb TO admin;\n\n# List all of your databases\n\\list\n\n# Connect to your newly created DB as a test\n\\connect wwwdb\n\n# Exit Postgres console\n\\q\n```\n\n#### Step 6\n\nSetup and install the necessary Postgres plugins. Aftewards seed the database with the necessary tables.\n\n```sh\nnpm run script database-setup\nnpm run script database-seed\n```\n\nThere is also `npm run script database-drop` if you just want to drop your tables for testing.\n\n#### **[OPTIONAL]** Step 7\n\nIf you need to run a node script without running the node server, an example is provided for your convenience\n\n```sh\nnpm run script example\n```\n\n#### Finish\n\nView `http://localhost:3005` in your browser. You should be able to use the full example end-to-end and modify the code however you like.\n\n#### Production deployment\n\nYou will need to add production environment variables. If you set up your Postgres database on [Render](https://render.com) the values will look something like this\n\n```env\nPRODUCTION_DATABASE_PORT=5432\nPRODUCTION_DATABASE_HOST=oregon-postgres.render.com\nPRODUCTION_DATABASE_NAME=yourdatabasename\nPRODUCTION_DATABASE_USERNAME=yourdatabasename_user\nPRODUCTION_DATABASE_PASSWORD=XXXXXXXXXXXXXXXXXXXXX\n```\n\nThen you will need to run production scripts\n\n```sh\nnpm run production-script database-setup\nnpm run production-script database-seed\n```\n\nFor deploying your new website, I recommend any of the following choices:\n\n- [Render](https://render.com/i/internet-gift-from-jim)\n- [Vercel](https://vercel.com/)\n- [Heroku](https://heroku.com)\n\n#### Questions?\n\nContact [@wwwjim](https://twitter.com/wwwjim).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjimmylee%2Fwww-react-postgres","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjimmylee%2Fwww-react-postgres","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjimmylee%2Fwww-react-postgres/lists"}