{"id":13489318,"url":"https://github.com/fauna-labs/fwitter","last_synced_at":"2025-03-28T04:31:03.006Z","repository":{"id":43079304,"uuid":"256481647","full_name":"fauna-labs/fwitter","owner":"fauna-labs","description":"Fwitter is an example application that demonstrates the features and functionality of Fauna.","archived":false,"fork":false,"pushed_at":"2022-05-25T05:20:47.000Z","size":6617,"stargazers_count":295,"open_issues_count":6,"forks_count":92,"subscribers_count":11,"default_branch":"main","last_synced_at":"2024-05-21T01:53:53.893Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit-0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fauna-labs.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}},"created_at":"2020-04-17T11:14:57.000Z","updated_at":"2024-01-22T01:12:15.000Z","dependencies_parsed_at":"2022-08-16T01:30:26.951Z","dependency_job_id":null,"html_url":"https://github.com/fauna-labs/fwitter","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/fauna-labs%2Ffwitter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fauna-labs%2Ffwitter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fauna-labs%2Ffwitter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fauna-labs%2Ffwitter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fauna-labs","download_url":"https://codeload.github.com/fauna-labs/fwitter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245970418,"owners_count":20702412,"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-07-31T19:00:22.787Z","updated_at":"2025-03-28T04:31:02.091Z","avatar_url":"https://github.com/fauna-labs.png","language":"JavaScript","funding_links":[],"categories":["Open source example apps","JavaScript"],"sub_categories":["React"],"readme":"A full introduction to this project can be found in the [docs](https://docs.fauna.com/fauna/current/start/apps/fwitter.html). \n\nThis project is an example of how to build a 'real-world' app with highly dynamic data in a serverless fashion using React hooks and FaunaDB. Since FaunaDB was developed by ex-Twitter engineers, a Twitter-like application felt like an appropriately sentimental choice, and we call this serverless baby ‘Fwitter’. \n\n\u003cimg src=\"https://github.com/fauna-brecht/fwitter/blob/main/readme/fwitter.png?raw=true\" width=\"600\"\u003e\n\nThere is a first [CSS-tricks article](https://css-tricks.com/rethinking-twitter-as-a-serverless-app/) that describes the application in general, explains auth, data modeling and simple queries and brushes over the other features. \nMore articles are coming on the [Fauna blog](https://fauna.com/blog) and/or CSS Tricks.\n\nIt uses the Fauna Query Language (FQL) and starts with a frontend-only approach that directly accesses the serverless database FaunaDB for data storage, authentication, and authorization. \n\n\u003cimg src=\"readme/stack1.png?raw=true\" width=\"400\"\u003e\n\nA few features are still missing and will be covered in future articles, including streaming, pagination, benchmarks, and a more advanced security model with short-lived tokens, JWT tokens, single sign-on (possibly using a service like Auth0), IP-based rate limiting (with Cloudflare workers), e-mail verification (with a service like SendGrid), and HttpOnly cookies.\n\n\u003cimg src=\"readme/stack2.png?raw=true\" width=\"400\"\u003e\n\n\n## Prerequisites\nThis app requires Node.js version 14 (LTS) or later.\n\n## Set up the project\nThis app was created with Create React App. To start using it we need to: \n\n### Install npm packages\n`npm install`\n\n### Set up the database\n\nTo set up the project, go to the [FaunaDB Dashboard](https://dashboard.fauna.com/) and sign up. \n\n\u003cimg src=\"readme/sign_up.png?raw=true\" width=\"600\"\u003e\n\nOnce you are in the dashboard, click on New Database, select Classic for the Region Group, fill in a name, and click Save. \n\u003cimg src=\"readme/new_database.png?raw=true\" width=\"600\"\u003e\n\n\u003cimg src=\"readme/new_database2.png?raw=true\" width=\"600\"\u003e\n\nYou should now be on the \"Overview\" page of your new database. \nNext, to manipulate the database from within our setup scripts, we need a key. Click on the Security tab in the left sidebar, then click the New key button. \n\n\u003cimg src=\"readme/admin_key1.png?raw=true\" width=\"600\"\u003e\n\nIn the \"New key\" form, the current database should already be selected. For \"Role\", leave it as \"Admin\" and give it a name.\n\n\u003cimg src=\"readme/admin_key2.png?raw=true\" width=\"600\"\u003e\n\nNext, click Save and copy the key secret displayed on the next page. It will not be displayed again.\n\n\u003cimg src=\"readme/admin_key3.png?raw=true\" width=\"600\"\u003e\n\nYou now have the option to place it in your environment variables (REACT_APP_LOCAL___ADMIN) via .env.local, we have provided an example file .env.local.example that you can rename. Although the .env.local file is gitignored, make sure not to push your admin key, this key is powerful and meant to stay private. The setup scripts will therefore also ask you the key if you did not place it in your environment vars so you could opt to paste them in then instead.\n\n```\nREACT_APP_LOCAL___ADMIN=\u003cinsert your admin key\u003e\n```\n\nWe have prepared a few scripts so that you only have to run the following commands to initialize your app, create all collections, and populate your database. The scripts will ask for the admin token that you have created and will give you further instructions.  \n```\n// run setup, this will create all the resources in your database\n// provide the admin key when the script asks for it. \nnpm run setup\n```\nWhen this script has finished setting up everything you will receive a new key which will automatically be written in your .env.local file (or create this file if it doesn't exist yet from the example file). This key is the bootstrap key that has very tight permissions (it can only register and login) and will be used to bootstrap our application. \n```\nREACT_APP_LOCAL___BOOTSTRAP_FAUNADB_KEY=\u003cinsert faunadb bootstrap key\u003e\n```\n\n### Populate the database (optional)\nWe also provide a script that adds some data to the database (accounts, users, fweets, comments, likes, etc..) for you to play around with. It will use or ask for the same admin key.\n\n```\nnpm run populate\n```\n\nOnce you do, you will get four users to login with: \n- user1@test.com\n- user2@test.com\n- user3@test.com\n- user4@test.com\n\nall with password: 'testtest'\n\nIf you do not see a lot on the feed of the user you logged in with, search for another user (type in a letter such as 'b' or 'a') and click the + sign to follow him/her.\n\n## Run the project\nThis project has been created with [Create React App](https://reactjs.org/docs/create-a-new-react-app.html#create-react-app) and therefore has the same familiar commands:\n\n`npm start`\n\nto start your application. \n\n### Update something in the setup\nWhat if I am experimenting and want to update something? \nTo update User Defined Functions or Roles you can just alter the definition and run `npm run setup` again. It will verify whether the role/function exists and override it.\n\nOne thing that can't be altered just like that are indexes (makes sense of course, they could contain quite some data). \nIn order to just set up from scratch again you can run `npm run destroy` followed by `npm run setup`. Note, that since names such as collections and indexes are cached, you will have to wait +-60 secs but we can easily get around that by just removing and adding the complete database. In that case, we would remove our ADMIN key as well which would mean that we have to generate a new one each time. However, if we just create an admin key and use that to add (on setup) and remove (on destroy) a child database, than we can get around that inconvenience. We have provided you with that option. When you add the environment variable 'REACT_APP_LOCAL___CHILD_DB_NAME', the script will create a child database on `npm run setup` and destroy it on `npm run destroy` instead of removing all collections/indexes/functions. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffauna-labs%2Ffwitter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffauna-labs%2Ffwitter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffauna-labs%2Ffwitter/lists"}