Full-stack web app made for the final degree project using React, Tailwind CSS, Express, MongoDB and Nodemailer (with some handlebars - HBS).
SPA made during my studies at IlernaFP (Ilerna Online). It uses React to manipulate the DOM and update it each time a change is detected.
The styling has been made using TailwindCSS, it's a (mobile first) CSS framework. Thanks to the breakpoints (sm, md, lg, xl, 2xl) that Tailwind offers, I made the web fully responsive, much faster than with SCSS/CSS.
Everything on the app has been made using JavaScript.
The newsletter has been made using Nodemailer, a nodeJS module used to send mail. In my case I used some HBS dynamic templates to send as HTML emails.
Use the command npm i or yarn add to install all the necessary node modules.
Then you should use your MongoDB GUI (or shell) of preference, in my case it's MongoDB Compass. Here you have to create a DB named proyectoDAW2021 and 3 collections inside the new DB:
newsletterpeopleproducts
Once you create the 3 collections, you have to import the data inside them. The JSON files are located inside the db folder, you have to import the corresponding JSON file, the newsletter.json file in the newsletter collection, etc..
Then, you must create a .env file in the root of the project. Inside this file you should type your DB URL key using the following format:
DB_URL=YOUR_MONGODB_CONNECTION_STRING\proyectoDAW2021
NOTE: in case you want to use or test the mail function you will have to create 3 new keys inside the .env and fill them with your mail provider and account info:
EMAIL_HOST=EMAIL_HOST(IT'S MOST LIKELY A DOMAIN)EMAIL_USER=YOUR_EMAIL_USERNAME(INCLUDING THE @ PART)EMAIL_PASSWORD=YOUR_EMAIL_PASSWORD
Once you have completed the previous steps you can execute the following command in the root folder:
yarn start or npm start
This command runs the app in the development mode.
Open http://localhost:3000 once you execute the command to view it in the browser. (It usually opens a new tab automatically in your default browser when you use the command).
This project was bootstrapped with Create React App.