The technologies used in this project include the following:
Please note that this project is nowhere close to being finished. There are many things yet to do. It is still under its alpha phase.
This project is available to be self-hosted. It's quite simple, just like setting up any other Next.js app.
A very important thing to remember is that this self-hosting "guide" is not final yet, and is subject to change.
Note: To view the steps, just click on the titles to trigger the dropdown.
Clone the repository
You can clone the repository using either HTTPS or SSH.
With HTTPS:
git clone https://atomdevelops/atom-mdb.gitWith SSH:
git clone [email protected]:atomdevelops/atom-mdb.gitOnce you have cloned the repository, cd into the directory of the cloned repository. This directory is most likely named atom-mdb--main.
Install dependencies
To start the project, you need to install the necessary modules for it to work as expected. This can simply be done with the `yarn` command: ```bash yarn ```
After running this command, you're ready to move on to the next step.
Run the project in development mode
After installing dependencies, you can start the project by running:
yarn devThis will open a development environment with the project and will allow you to open the website on https://localhost:3000.
To open the development server on a different port (other than port 3000), go inside the ./package.json file located in the root directory of the project.
Once you are inside package.json, look at the JSON attribute labeled scripts:
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},Then, change the dev script to:
"dev": "next dev -p 3002"Note: Replace the port
3002with your desired port.
Enter the environment variables
Great! You're almost there! The project will run, but you won't be able to sign in and view the dashboard.
To do this, all you have to do is go to the Firebase console. From here, you need to create a new project and enter its information inside your .env.local file. Let's see how to do this:
- Log in to the Firebase console
- Click on "Create a new project"
- Name your project then click "Next"
- Follow the steps accordingly until you have successfully created your project
- At the top, create a new "Web app"
- Title the app and then click "Next"
- From here, you should see JavaScript code showing you how to initialize a Firebase app
- Inside your project, rename the
.env.local.examplefile to.env.local - Remove the placeholder values from the environment variables and enter the values presented to you when creating the new Web App on Firebase
- Don't be shy to put your private keys inside the environment variables files as Next.js automatically ignores it when you are pushing it to any platform like GitHub.
- Once all of the keys are entered, you you may save the file and restart your development server. As you can see, when you click "Login with Google," it opens a new popup window saying it will redirect you to
<your project>.firebaseapp.com. It worked! - Sign in with your Google account and access the dashboard!
To deploy a self-hosted version of your project is quite simple. For this, I will show you how to use Vercel. Although, Netlify practically works the same way.
- Push the cloned directory to your own GitHub repository
- Go to the Vercel dashboard and sign in with GitHub
- Then create a new project
- Select the repository you just created
- Scroll down until you see the section titled "Environment Variables" and open it
- One by one, copy and paste the names of each environment variable from your
.env.localfile along with its value on the name and value field - Make sure to click "Add" for every new environment variable you insert
- Finally, click deploy
- Watch the deployment logs as the project is deployed
I won't be including a Netlify version for the deployment process, but it's quite similar.
Previews have been removed due to the constant updates with the project. Currently, there is a version 2 being worked on. You can check it out on the dev branch.