|
[[_TOC_]]
|
|
[[_TOC_]]
|
|
|
|
|
|
|
|
## IDE
|
|
|
|
|
|
|
|
Our team uses [Visual Studio Code](https://code.visualstudio.com) (VSCode) as our primary integrated development environment.
|
|
|
|
|
|
## Setup of the basic application
|
|
## Setup of the basic application
|
|
|
|
|
|
To setup the root application we use Next.js.
|
|
To set up the root application, we use Next.js.
|
|
At first we have to install Node.js (version 10.13 or later). After that we use the console and direct to a new folder for our project (we could also open the folder in VSCode and use the terminal) and run the command:
|
|
At first, we have to install Node.js (version 10.13 or later). After that, we use the console and direct to a new folder for our project (we could also open the folder in VSCode and use the terminal) and run the command:
|
|
```js
|
|
```js
|
|
npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
|
|
npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
|
|
```
|
|
```
|
|
Now an example app from Next.js is being created in this directory:
|
|
Now, an example app from Next.js is being created in this directory:
|
|
|
|
|
|

|
|

|
|
|
|
|
|
To run the application we have to change into the directory called **nextjs-blog**:
|
|
To run the application, we have to change into the directory called **nextjs-blog**:
|
|
```sh
|
|
```sh
|
|
cd nextjs-blog
|
|
cd nextjs-blog
|
|
```
|
|
```
|
... | @@ -20,9 +24,39 @@ Then we run the command: |
... | @@ -20,9 +24,39 @@ Then we run the command: |
|
```js
|
|
```js
|
|
npm run dev
|
|
npm run dev
|
|
```
|
|
```
|
|
which starts the Next.js app`s development server on port 3000.<br>
|
|
which starts the Next.js app's development server on port 3000.<br>
|
|
|
|
|
|

|
|

|
|
|
|
|
|
To check if the app is working properly we can just open http://localhost:3000 from our browser, wich should look like this:
|
|
To check if the app is working properly, we can just open http://localhost:3000 from our browser, which should look like this:
|
|

|
|

|
|
|
|
|
|
|
|
## Databank
|
|
|
|
|
|
|
|
Our project's backend has been integrated with MongoDB, and we've utilized Mongoose to establish a connection between the two.
|
|
|
|
|
|
|
|
### MongoDB
|
|
|
|
|
|
|
|
For our project, we have opted to use [MongoDB](https://www.mongodb.com), a document-oriented NoSQL database, since we only need to store user and event data. MongoDB's flexible document structure makes it an ideal choice for our needs.
|
|
|
|
|
|
|
|
To begin, you'll need to download MongoDB onto your computer. This can be accomplished by following the [MongoDB Community](https://www.mongodb.com/try/download/community) instructions that are tailored to your specific operating system.
|
|
|
|
|
|
|
|
In addition, it can be helpful to download [MongoDB Compass](https://www.mongodb.com/products/compass), a graphical user interface that enables you to directly view your data sets.
|
|
|
|
|
|
|
|
After successfully downloading MongoDB, you can proceed to install the client module/driver for your project. Ensure that you're in the **nextjs-blog** directory, and run the following command:
|
|
|
|
|
|
|
|

|
|
|
|
|
|
|
|
You can verify that the dependency has been added correctly by checking the **package.json** file.
|
|
|
|
|
|
|
|

|
|
|
|
|
|
|
|
### Mongoose
|
|
|
|
|
|
|
|
To simplify object access in MongoDB for our project, we utilize Mongoose. To add it to your project, ensure that you're in the **nextjs-blog** directory and run the following command:
|
|
|
|
|
|
|
|

|
|
|
|
|
|
|
|
This will install the Mongoose package and add it as a dependency to your project. You can check the **package.json** file.
|
|
|
|
|
|
|
|
 |
|
|
|
\ No newline at end of file |