{"id":13621266,"url":"https://github.com/kontenbase-team/writter","last_synced_at":"2025-04-15T01:31:49.857Z","repository":{"id":43662764,"uuid":"455610555","full_name":"kontenbase-team/writter","owner":"kontenbase-team","description":"🐦 A very simple Twitter clone with Remix and Kontenbase. Just a demo, not meant to be 100%","archived":false,"fork":false,"pushed_at":"2022-03-30T16:55:36.000Z","size":1275,"stargazers_count":11,"open_issues_count":0,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-08T08:40:00.939Z","etag":null,"topics":["clone","kontenbase","remix","twitter","writter"],"latest_commit_sha":null,"homepage":"https://writter.kontenbase.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kontenbase-team.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":"2022-02-04T16:05:16.000Z","updated_at":"2023-07-18T09:13:27.000Z","dependencies_parsed_at":"2022-09-10T08:01:03.493Z","dependency_job_id":null,"html_url":"https://github.com/kontenbase-team/writter","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/kontenbase-team%2Fwritter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kontenbase-team%2Fwritter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kontenbase-team%2Fwritter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kontenbase-team%2Fwritter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kontenbase-team","download_url":"https://codeload.github.com/kontenbase-team/writter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248989258,"owners_count":21194559,"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":["clone","kontenbase","remix","twitter","writter"],"created_at":"2024-08-01T21:01:04.132Z","updated_at":"2025-04-15T01:31:49.527Z","avatar_url":"https://github.com/kontenbase-team.png","language":"TypeScript","funding_links":[],"categories":["W"],"sub_categories":[],"readme":"# Writter\n\nA Twitter clone with [Remix](https://remix.run/docs) and [Kontenbase](https://kontenbase.com).\nStyled with [Chakra UI](https://chakra-ui.com).\nJust a demo, not meant to be 100% complete.\n\n[![MIT License][license-badge]][license]\n\n\u003c!-- prettier-ignore-start --\u003e\n[license-badge]: https://img.shields.io/badge/license-MIT-red.svg?style=flat-square\n[license]: https://github.com/kontenbase-team/writter/blob/main/LICENSE\n\u003c!-- prettier-ignore-end --\u003e\n\n## Features\n\n### What's implemented\n\n- Landing page\n- Authentication/Authorization\n  - Sign up\n  - Sign in\n  - Sign out\n  - Permission of ownership aka authorization\n- Home with timeline of Wreets (Tweets)\n- Link to go to Wreet page\n- View Wreet content page\n- View user profile\n- Create a new Wreet\n- Delete owned Wreet\n\n### What's might not implemented\n\n- Follow other users\n- Filtered Wreet timeline\n- Comment or making a thread in a Wreet\n- Like a Wreet\n- ReWreet (retweet)\n- Bookmark\n- Copy link to Wreet\n\n## Tech Stack\n\n- React + Remix + React Router\n  - HTML\n  - CSS\n  - JavaScript\n  - TypeScript\n- Styling options:\n  - Chakra UI\n  - Stitches + Radix UI + Radix Colors\n- Deployment options:\n  - Vercel\n- Extras:\n  - Prettier\n  - ESLint\n  - Cloudflare DNS\n\n## Guide\n\nHere are the step by step guide to develop this app. You can also watch the [video on YouTube](https://youtu.be/_aYuP92rOAk)\n\n### Backend with Kontenbase\n\n- Sign in and setup a new Kontenbase Project\n- Know to get API Key from the Settings\n- Know to get API URL\n- Create a new private `wreets` service and customize it to have:\n  - `content`\n  - `createdAt`\n  - `createdBy`\n- Customize `users` service to have:\n  - `handle`\n  - `createdAt`\n  - `createdBy`\n- Test to sign up or register new User\n- Test to sign in or login to User\n- Test to create new Wreet\n- Test to get all Wreet\n- Test to get one Wreet by ID\n- Test to delete a Wreet\n- Check Kontenbase Docs\n  - Welcome\n  - Getting Started\n  - SDK\n\n### Development with Remix\n\n- Generate React+Remix app with `create-remix`\n  - `npx create-remix@latest`\n- Create a GitHub repo and push the repo\n- Setup `.env` `.env.example` and Git ignore `.env` `.DS_Store`\n- Setup `package.json`\n  - name\n  - description\n  - license\n  - scripts\n- Make sure to install dependencies with `npm install`\n- Start development server with `npm run dev`\n- Open up [http://localhost:3000](http://localhost:3000)\n- Install app dependencies\n  - `npm install dotenv dayjs invariant remix-auth remix-auth-form @kontenbase/sdk framer-motion @chakra-ui/react @chakra-ui/icons @emotion/react @emotion/styled `\n- Install development dependencies\n  - `npm install -D @types/invariant @typescript-eslint/eslint-plugin @typescript-eslint/parser prettier eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import\" eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-unused-imports`\n- Setup ESLint and Prettier config\n- Copy favicons assets and manifest\n- Know that `api` folder only for `@remix-run/vercel`\n- Setup `chakra-ui.ts` config file\n- Setup `types`\n- Setup `components`\n- Setup `features`\n- Setup `lib`\n  - `dayjs`\n  - `kontenbase`\n- Setup `utils`\n- Setup `services`\n  - `session.server`: Cookie session storage with Remix Server\n  - `auth.server`: Authenticator from `remix-auth` and `FormStrategy` from `remix-auth-form`\n  - Implement `signin` and `signup` with combination of Kontenbase SDK and manual HTTP request (due to the SDK cannot handle server-side call and custom request body).\n- Setup Remix `root`.\n- Make sure of Remix `entry` client and server.\n- Setup `routes`\n  - `index`\n  - `about`\n  - `signup`\n  - `signin`\n  - `signout`\n  - `home`: Timeline of all Wreets\n    - Currently not filtered by following users\n  - `wreet`: New Wreet composer\n  - `$userHandle`: user profile\n  - `$userHandle/$wreetId`\n    - Single Wreet page\n    - Delete an owned Wreet\n  - `profile`: Redirect to authenticated user profile\n\n### Deployment with Vercel\n\nAfter having run the `create-remix` command and selected \"Vercel\" as a deployment target, you only need to [import your Git repository](https://vercel.com/new) into Vercel, and it will be deployed.\n\nIt is generally recommended to use a Git repository, because future commits will then automatically be deployed by Vercel, through its [Git Integration](https://vercel.com/docs/concepts/git).\n\nIf you'd like to avoid using a Git repository, you can also deploy the directory by running [Vercel CLI](https://vercel.com/cli):\n\n```sh\nnpm i -g vercel\nvercel\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkontenbase-team%2Fwritter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkontenbase-team%2Fwritter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkontenbase-team%2Fwritter/lists"}