This project is a web-based LAS file viewer that allows users to upload and view LAS files directly in the browser. The application is built using React.js, Next.js, MongoDB, Node.js, and Express.

Before Upload File

After Upload File

Video Demo

/las-file-viewer
├── /client                # Frontend (Next.js)
│   ├── /pages
│   │   └── index.js       # Main page of the frontend
│   ├── /styles
│   │   └── globals.css    # Global CSS styles
│   └── .env.local         # Environment variables for React
├── /uploads               # Directory for storing uploaded files
├── server.js              # Backend server
├── .env                   # Environment variables for Node.js
├── .gitignore             # Git ignore file
└── README.md              # Project README

git clone https://github.com/logusivam/Las-Viewer.git
cd las-file-viewer

npm install

cd client
npm install

1. Create a MongoDB Atlas Account:

   • Sign up at MongoDB Atlas.
   • Create a new cluster.

2. Set Up Your Database:

   • Create a new database in your cluster.
   • Create a new collection named lasfiles to store the uploaded LAS files.

3. Get Your MongoDB Connection String:

   • Navigate to your cluster in MongoDB Atlas.
   • Click on "Connect" and choose "Connect your application".
   • Copy the connection string provided.

4. Configure Environment Variables:

   • In the root directory of your project, you’ll find a file named .env.example.
   • Rename this file to .env and replace your-mongodb-connection-string-here with your actual MongoDB connection string:

MONGO_URI=your-mongodb-connection-string-here

Note: The .env file is included in .gitignore to ensure sensitive information is not exposed in the repository.

npm start

cd client

npm run dev

1. Uploading LAS Files:

   • Click on the "Upload File" button.
   • Select one or more LAS files from your computer.
   • The uploaded files will be listed, and you can click on a file name to view its contents.

2. Viewing LAS Files:

   • The selected LAS file will be displayed in the browser with the content formatted for easy viewing.

3. Customization:

   • You can customize the background color, viewer styles, button colors, and other UI elements by modifying the globals.css file in the /client/styles/ directory.

• Environment Variables: The .env file is excluded from the repository using .gitignore for security reasons. Ensure that you create and configure this file locally using the provided .env.example file.
• File Uploads: Uploaded LAS files are stored in the /uploads directory on the server.
• Development Mode: For development, you can use VS Code with MongoDB for VS Code extension to manage database connections and interact with your MongoDB Atlas instance.