Implementing a fullstack app with Next.js using React (frontend), Express and Prisma Client (backend). It uses a SQLite database file with some initial dummy data which you can find at ./prisma/dev.db
.
Install npm dependencies:
cd pcarrer
npm install
Run the following command to create your SQLite database file. This also creates the User
and Post
tables that are defined in prisma/schema.prisma
:
npx prisma migrate dev --name init
When npx prisma migrate dev
is executed against a newly created database, seeding is also triggered. The seed file in prisma/seed.js
will be executed and your database will be populated with the sample data.
npm run dev
The app is now running, navigate to http://localhost:3000/
in your browser to explore its UI.
Expand for a tour through the UI of the app
Blog (located in ./pages/index.tsx
)
Signup (located in ./pages/signup.tsx
)
Create post (draft) (located in ./pages/create.tsx
)
Drafts (located in ./pages/drafts.tsx
)
View post (located in ./pages/p/[id].tsx
) (delete or publish here)
You can also access the REST API of the API server directly. It is running on the same host machine and port and can be accessed via the /api
route (in this case that is localhost:3000/api/
, so you can e.g. reach the API with localhost:3000/api/feed
).
/api/post/:id
: Fetch a single post by itsid
/api/feed
: Fetch all published posts/api/filterPosts?searchString={searchString}
: Filter posts bytitle
orcontent
/api/post
: Create a new post- Body:
title: String
(required): The title of the postcontent: String
(optional): The content of the postauthorEmail: String
(required): The email of the user that creates the post
- Body:
/api/user
: Create a new user- Body:
email: String
(required): The email address of the username: String
(optional): The name of the user
- Body:
/api/publish/:id
: Publish a post by itsid
/api/post/:id
: Delete a post by itsid