The Remix Blog is a platform built for users to create and share blog posts. That is where developers to learn, collaborate, and grow together.
- Node.js (>=20.0.0)
- npm (Node Package Manager)
- SQLite
- Prisma CLI (optional for database migrations)
- A
.envfile withDATABASE_URLandSESSION_SECRETvariables.
- Clone the Repository
- Install Dependencies
npm install- Set Up Environment Variables
- Create a
.envfile in the root directory. - Add the following lines, replacing the placeholders with your actual database URL and session secret:
DATABASE_URL="your_database_url"
SESSION_SECRET="your_session_secret"
If you don't have openssl installed, you can also use 1Password to generate a random secret, just replace $(openssl rand -hex 32) with the generated secret.
- Database Setup
- Run the following command to migrate your database:
npx prisma migrate dev --name init
- Initial setup:
npm run setupIf have any error in this step, please clean up folder ./prisma. Just keep seed.ts and schema.prisma. Then run migrate again.
- Start the Server
npm run devThis starts your app in development mode, rebuilding assets on file changes.
The database seed script creates a new user with some data you can use to get started:
- Email:
hello@liam.dev - Password:
strongpassword
The main functionality is creating users, logging in and out, and creating and deleting posts.
- creating users, and logging in and out ./app/models/user.server.ts
- user sessions, and verifying them ./app/apis/session.server.ts
- creating, and deleting posts ./app/models/post.server.ts
You can see all post of all user
Creating a new account to use feture CRUD post.
- Once logged in, click on User and navigate to "my posts".
- Click the "New Post" button
- Fill in the details of your blog post and submit.
Browse through various blog posts from the post page and the homepage.
You can delete or update the post if you are author
- Built with the latest Remix framework.
- Uses SQLite for lightweight and efficient data management.
- Prisma ORM for easy database management.
- React Icons for enhanced UI elements.
- User authentication for personalized experiences.
- Capabilities to create, view, and delete blog posts.