Medium + Twitter = Medeet
For simplicity of this demo, these are the only features.
- Home with collection of Posts
- Link to go to the Post
- View single Post in page
- Authentication/Authorization
- Register
- Login
- Logout
- Permission of ownership aka authorization
- Create a new Post
- Delete owned Post
- Profile page
- Complete slug of
userHandle/postSlug
- React + Remix + React Router
- HTML
- CSS
- JavaScript
- TypeScript
- Styling:
- Tailwind CSS
- Vechai UI - React components for Tailwind
- Deployment:
- Vercel
- Extras:
- Prettier
- ESLint
- Cloudflare DNS
Here are the step by step guide to develop this app.
There is a very similar tutorial (Writter, a simple Twitter clone) that you can watch on YouTube
- Sign in and setup a new Kontenbase Project
- Know to get API URL
- Know to get API Key from the Settings
- Create a new private
posts
service and customize it to have:title
content
createdAt
createdBy
- Customize
users
service to have:createdAt
createdBy
- Test to register new User
- Test to login to User
- Test to create a new Post
- Test to get all Posts
- Test to get one Post by ID
- Test to delete one Post by ID
- Check Kontenbase Docs
- Welcome
- Getting Started
- SDK
- Installation
- Import
- Generate React+Remix app with
create-remix
npx create-remix@latest
- Initialize local Git repo
- Create a GitHub repo and push the repo
- Setup
.env
.env.example
and Git ignore.env
.DS_Store
SESSION_SECRET
KONTENBASE_API_KEY
KONTENBASE_API_URL
- Setup
package.json
- name
- description
- license
- scripts
- Make sure to install dependencies with
npm install
- Start development server with
npm run dev
- Open up http://localhost:3000
- Install some more app dependencies
npm install @kontenbase/sdk dayjs date-fns invariant remix-auth remix-auth-form
- Install some more development dependencies
npm install -D @types/invariant prettier
- Setup ESLint should already done by Remix
- Setup Prettier config
- TODO: Copy favicons assets and manifest
- Know that
api
folder only for@remix-run/vercel
- Setup
types
- Setup
components
- Setup
utils
- Setup
libs
kontenbase
clsx
dayjs
date-fns
- Setup
services
session.server
: Cookie session storage with Remix Serverauth.server
: Authenticator fromremix-auth
andFormStrategy
fromremix-auth-form
- Implement
login
andregister
with combination of Kontenbase SDK and manual HTTP request (due to the SDK cannot handle server-side call and custom request body).
- Setup Tailwind CSS
tailwind.config.js
themes
config file for Vechai UI
- Setup Remix
root
file. - Make sure of Remix
entry
client and server. - Setup
routes
and assemble thecomponents
/index
: Collection of all Posts/register
/login
/logout
/new
: New post composer/$postId
- Single Post page
- Delete an owned Post
After having run the create-remix
command and selected "Vercel" as a deployment target, you only need to import your Git repository into Vercel, and it will be deployed.
It is generally recommended to use a Git repository, because future commits will then automatically be deployed by Vercel, through its Git Integration.
If you'd like to avoid using a Git repository, you can also deploy the directory by running Vercel CLI:
npm i -g vercel
vercel