Writter

Overview:

Writter is a Twitter clone built with Remix and Kontenbase. It is a demo application and not intended to be fully complete. The application is styled using Chakra UI and has features like authentication, authorization, creating and deleting Wreets (Tweets), viewing user profiles, and more. The tech stack includes React, Remix, React Router, HTML, CSS, JavaScript, and TypeScript.

Features:

• Landing page: A landing page for the application.
• Authentication/Authorization: Ability to sign up, sign in, and sign out.
• Permission of ownership: Users have ownership permission for their Wreets.
• Home with timeline of Wreets: Users can view a timeline of Wreets.
• View Wreet content page: Users can view the content of a Wreet.
• View user profile: Users can view the profile of other users.
• Create a new Wreet: Users can create new Wreets.
• Delete owned Wreet: Users can delete Wreets they own.

Installation:

1. Sign in and set up a new Kontenbase Project.
2. Obtain the API Key from the Settings.
3. Obtain the API URL.
4. Create a new private wreets service and customize it with the required fields.
5. Customize the users service to include the required fields.
6. Test the sign-up, sign-in, create Wreet, get all Wreets, get a single Wreet by ID, and delete a Wreet functionalities.
7. Refer to the KontenbaseDocs for more information.
8. Install dependencies by running npm install in the project directory.
9. Start the development server with npm run dev.
10. Open http://localhost:3000 in the browser.
11. Install app dependencies by running npm install dotenv dayjs invariant remix-auth remix-auth-form @kontenbase/sdk framer-motion @chakra-ui/react @chakra-ui/icons @emotion/react @emotion/styled in the project directory.
12. Install development dependencies by running 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 in the project directory.
13. Set up ESLint and Prettier config.
14. Copy favicons assets and manifest.
15. Note that the api folder is only for @remix-run/vercel.
16. Set up chakra-ui.ts config file.
17. Set up types.
18. Set up components.
19. Set up features.
20. Set up libdayjskontenbase.
21. Set up utils.
22. Set up services (session.server, auth.server).
23. Implement sign in and sign up functionalities using Kontenbase SDK and manual HTTP requests.
24. Set up Remix root.
25. Verify Remix entry client and server.
26. Set up routes (index, about, signup, signin, signout, home, wreet, user profile).
27. Deploy the application.

Summary:

Writter is a Twitter clone built with Remix and Kontenbase. It features authentication, authorization, creating and deleting Wreets, viewing user profiles, and more. The application is styled using Chakra UI and utilizes a tech stack including React, Remix, React Router, HTML, CSS, JavaScript, and TypeScript. The installation process involves setting up a new Kontenbase project, obtaining API keys, configuring services, and installing dependencies. Once set up, users can start developing and testing the application locally before deploying it.