Scribd
Upload
4 views3 pages

Simple Fullstack App with Node.js

The document outlines the structure and code for a simple fullstack application using Node.js, Express, MongoDB, HTML, and CSS. It includes a server setup in 'server.js', a user model in 'models/User.js', an HTML form for user registration in 'public/index.html', and basic styling in 'public/style.css'. The application allows users to register by submitting their name and email, which are then saved to a MongoDB database.

Uploaded by

sibilevis0219
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views3 pages

Simple Fullstack App with Node.js

The document outlines the structure and code for a simple fullstack application using Node.js, Express, MongoDB, HTML, and CSS. It includes a server setup in 'server.js', a user model in 'models/User.js', an HTML form for user registration in 'public/index.html', and basic styling in 'public/style.css'. The application allows users to register by submitting their name and email, which are then saved to a MongoDB database.

Uploaded by

sibilevis0219
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

Simple Fullstack App (Node.

js + Express
+ MongoDB + HTML/CSS)
Project Structure

simple-app/
├── [Link]
├── public/
│ ├── [Link]
│ └── [Link]
├── models/
│ └── [Link]
├── .env
└── [Link]

.env File

PORT=3000
MONGO_URI=mongodb://localhost:27017/simpleapp

models/[Link]

const mongoose = require('mongoose');

const userSchema = new [Link]({


name: String,
email: String
});

[Link] = [Link]('User', userSchema);

public/[Link]

<!DOCTYPE html>
<html>
<head>
<title>Simple App</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>Register User</h1>
<form id="userForm">
<input type="text" name="name" placeholder="Name" required><br>
<input type="email" name="email" placeholder="Email" required><br>
<button type="submit">Submit</button>
</form>
<script>
[Link]('userForm').addEventListener('submit', async (e) => {
[Link]();
const form = [Link];
const data = {
name: [Link],
email: [Link]
};
await fetch('/api/users', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: [Link](data)
});
alert('User saved!');
[Link]();
});
</script>
</body>
</html>

public/[Link]

body {
font-family: Arial;
padding: 20px;
}
input {
margin: 5px 0;
}

[Link]

require('dotenv').config();
const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const User = require('./models/User');

const app = express();


const PORT = [Link] || 3000;

[Link]([Link]());
[Link]([Link]('public'));

[Link]([Link].MONGO_URI)
.then(() => [Link]('MongoDB connected'))
.catch(err => [Link](err));

[Link]('/api/users', async (req, res) => {


try {
const user = new User([Link]);
await [Link]();
[Link](201).json(user);
} catch (err) {
[Link](400).json({ error: [Link] });
}
});

[Link](PORT, () => {
[Link](`Server running on [Link]
});

You might also like