Document Management System using NextJS

The Document Management System is a web application developed using Next.js, that allows users to efficiently manage their documents. The system provides features for uploading, organizing, and retrieving documents. Users can upload documents through the web interface, which are then stored in local storage.

Output Preview: Let us have a look at how the final output will look like.

👁 gfgd

Prerequisites:

• NPM & NodeJS
• NextJS
• NextJS Routing
• React Hooks

Approach to Create Document Management System:

• Setup the Project by Creating a new NextJS project Install the necessary libraries.
• Design the layout of Document Management System, including components like Navbar, Documents, AddDocument, SearchBar, etc.
• Create Documents component which will display the list of documents added with functionality to view, delete and search specific document. Create a modal to view a document in detail.
• Create AddDocument component which contains the form to add the document details such as name, description and image.
• Use useState hook to manage the form state.
• Use localStorage to store document metadata
• We will use Bootstrap to style the components.

Steps to Create Document Management System:

Step 1: Create a application of NextJS using the following command.

npx create-next-app doc-management

Step 2: Navigate to project directory

cd doc-management

Step 3: Install the necessary package in your project using the following command.

npm install bootstrap
npm install react-toastify

Step 4: Create the folder structure as shown below and create the files in respective folders.

Project Structure:

👁 Screenshot-(59)

The updated dependencies in package.json file will look like:

"dependencies": {
 "bootstrap": "^5.3.3",
 "next": "14.1.3",
 "react": "^18",
 "react-dom": "^18",
 "react-toastify": "^10.0.5"
}

Example: Below are the components which describes the implementation Document Management System.

Start your application using the following command:

npm run dev

Output: Naviage to the URL http://localhost:3000:

👁 gfgdoc