This is a full CRUD NextJs App
ticket-app repository
This is a Next.js project bootstrapped with create-next-app. A Full CRUD NextJS app uses mongoDB (atlas connection) to create and manage help desk tickets. This app uses tailwind for styling.
- MongoDB - Database
- Mongoose - Database framework
- Atlas - MongoDB Cloud Database
- NextJS - Web Framework
- NodeJs - Server Environment
- Tailwind - CSS Style Library
You can run this application locally by running npm i
in the main folder where you have package.json run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
make sure you have the compatible version of the NodeJS if not run
nvn use 18.7.3You can start editing the page by modifying app/page.js. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
To run this app you need create an account on Atlas. You can create a free cluster and collection(Database) to store and retrieve your data. Make sure your cluster is accessible via any ip address(not secure only recommended fot experimental projects):
Store this in your env.local and use it to connect with your cluster. Replace admin with your username created for the cluster and password with your password. Do not check in or share your credentials!
mongodb+srv://admin:<password>@cluster0.x9eegis.mongodb.net/?retryWrites=true&w=majorityyou can manage data in the Atlas platform if you need to.
In the Ticket Page user can:
- Create/record a new ticket including title, description, category priority, progress and status
- "Title" is a text field and "Description" is a text area
- Category and Status are dropdowns
- Progress bar is made of 2 div(s)showing the progress with the help of CSS
style={{ width: `${progress}%` }}>
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>
<div>
<Nav />
{children}
</div>
</body>
</html>
);
}Homepage or Dashboard displays all the tickets based on unique categories
const { tickets } = await getTickets();
const uniqueCategories = [
...new Set(tickets?.map(({ category }) => category)),
];getTickets() is a GET call getting all the tickets from Atlas. Dashboard displays them by filtering them based on their unique category and generates <TicketCard/> component for each ticket
{tickets
.filter((ticket) => ticket.category === uniqueCategory)
.map((filteredTicket, _index) => (
<TicketCard
id={_index}
key={_index}
ticket={filteredTicket}
/>
))}import mongoose, { Schema } from "mongoose";
mongoose.connect(process.env.MONGODB_URI);
mongoose.Promise = global.Promise;
const ticketSchema = new Schema(
{
title: String,
description: String,
category: String,
priority: Number,
progress: Number,
status: String,
active: Boolean,
},
{
timestamps: true,
}
);
const Ticket = mongoose.models.Ticket || mongoose.model("Ticket", ticketSchema);
export default Ticket;All API Calls are happening in /api directory in route.js.
To run CRUD for each Ticket we can create a dynamic route under api folder.
ex:api/Tickets/[id]
- @shirinmjr - Built this as an experimental project
- Free Code Camp
- Hat tip to anyone whose code was used
- Inspiration
- Main Source code