Hereβs a continuous README for your repository, explaining how to set up the project and add the users
table with Convex, including the provided code snippet for user creation with email, password, and additional fields:
This repository is a starter template for building modern, full-stack React applications with shadcn UI, Convex for backend, and Bun for blazing-fast development. It includes authentication, user management, and more.
git clone <repo-url>
cd <repo-folder>
bun install
- Sign up at Convex and create a new project.
- Install the Convex CLI:
bun add convex
- Log in to Convex:
npx convex auth login
- Push your schema to Convex:
npx convex push
In your Convex schema file (convex/schema.ts
), define the users
table with the required fields:
import { defineSchema, defineTable } from "convex/server";
import { v } from "convex/values";
export default defineSchema({
users: defineTable({
email: v.string(),
name: v.string(),
userName: v.string(),
contactEmail: v.optional(v.string()),
role: v.union(v.literal("admin"), v.literal("user"), v.literal("proUser")),
age: v.optional(v.number()),
mobileNumber: v.optional(v.number()),
address: v.optional(v.string()),
customProfilePicture: v.string(),
profileImageStorageId: v.optional(v.id("_storage")),
following: v.array(v.string()),
followers: v.array(v.string()),
securityQuestions: v.array(v.string()),
updatedAt: v.number(),
lastPasswordUpdate: v.optional(v.number()),
likedBlogs: v.array(v.string()),
savedBlogs: v.array(v.string()),
}).index("by_email", ["email"]),
});
Create a file convex/auth.ts
and add the following code to handle user authentication and profile creation:
import { convexAuth } from "@convex-dev/auth/server";
import { Password } from "@convex-dev/auth/providers/Password";
import { DataModel, Id } from "./_generated/dataModel";
const CustomPassword = Password<DataModel>({
profile(params) {
return {
email: params.email as string,
name: params.name as string,
userName: params.userName as string,
contactEmail: params.contactEmail as string | undefined,
role: params.role as "admin" | "user" | "proUser",
age: params.age as number | undefined,
mobileNumber: params.mobileNumber as number | undefined,
address: params.address as string | undefined,
customProfilePicture: params.customProfilePicture as string,
profileImageStorageId: params.profileImageStorageId as
| Id<"_storage">
| undefined,
following: [],
followers: [],
securityQuestions: [],
updatedAt: params.updatedAt as number,
lastPasswordUpdate: undefined,
likedBlogs: [],
savedBlogs: [],
};
},
});
export const { auth, signIn, signOut, store, isAuthenticated } = convexAuth({
providers: [CustomPassword],
});
Push your updated schema and authentication logic to Convex:
npx convex push
- Start the development server:
bun run dev
- Open your browser and navigate to
http://localhost:5173
.
To keep your code clean, configure import aliases in tsconfig.json
:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
Now you can use aliases like @/components/Button
instead of relative paths.
- π¨ shadcn UI: Beautiful, customizable components.
- β‘ Convex: Real-time database and serverless functions.
- π Authentication: Secure user authentication.
- π Bun: Blazing-fast runtime and package manager.
Letβs build something amazing! πβ¨
Feel free to customize this further to match your repository's specifics! Let me know if you need additional tweaks. π