Travel Lovers - an application that allows a travel enthusiast to create an account to log past, upcoming, and bucket-list trips

Overview

Travel Lovers

Table of Contents

Description

Travel Lovers is an application that allows a travel enthusiast to create an account to log past, upcoming, and bucket-list trips.

Tools Used

  • Heroku
  • Express.js
  • MySQL2
  • Sequelize
  • Jest
  • Insomnia
  • Handlebars.js
  • Sass
  • Bulma
  • jQuery
  • bcrypt

Installation Instructions

  • You do not need to install anything to run this application. Simply visit the Heroku link at the bottom of the Usage section to use the app.

  • If you would like to test the app, follow the instructions in the Test section.

Usage

User Story

AS A travel enthusiast
I CAN visit the Travel Lovers website
SO THAT I can add, edit, and delete places I have visited, plan to visit, and want to visit
WHEN I visit the site for the first time
THEN I am presented with the login page, which includes an account login form and account sign-up form
WHEN I choose to sign up
I MUST use a username, email, and password
WHEN I click on the sign-up button
THEN my user credentials are saved and I am logged into the site
WHEN I revisit the site at a later time and choose to login
THEN I am prompted to enter my email and password
WHEN I am signed in to the site
THEN I see navigation links for the homepage, dashboard, and logout
WHEN I click on the homepage option in the navigation
THEN I am taken to the homepage and presented with a welcome image
WHEN I click on the dashboard option in the navigation
THEN I am taken to the dashboard and presented with past, upcoming, and bucket-list trip categories via kanban board
FOR EACH kanboard board category
I CAN add, edit, and delete; past, upcoming, and bucket-list trips
OFFERING a travel enthusiast an organized travel log

Deployed Application

Heroku Link: https://travel--lovers.herokuapp.com/

License

Permission to use this application is granted under the MIT license. Click on the link for more information: MIT License Information

Tests

  1. Download Node.js and MySQL

Node.js Installation

Make sure that you have Node.js installed on your computer by entering node -v in the command line. If successful, the command prompt will return a version number. If not, try reinstalling Node.js by following this link: https://nodejs.org/en/ and clicking on the LTS version. If you are on Windows, make sure to look for the section that says Download for Windows (x64). If you are using macOS, make sure to look for the section that says Download for MacOS (x64)

MySQL Installation

To install MySQL, visit the MySQL website in the following link: https://dev.mysql.com/doc/mysql-installation-excerpt/5.7/en/. Once there, look for the correct installation guide for your computer under Table of Contents and follow the instructions on the page.

  1. Clone the repository from GitHub Once Node.js and MySQL are downloaded, click on the green code button in GitHub and copy the link to this repository. Then open up your favorite code editor and open the terminal. In the terminal use cd to go to the root directory you want this repository to be cloned to. Finally, in the terminal, type git clone to clone this repository to your directory.

  2. Before starting the server you will need to configure the .env-example file to a .env file and put in the database name, your MySQL username, your MySQL password, and a secret for the session. The secret can be any combination of letters, numbers or special characters. If you do not make a .env file, THE CODE WILL FAIL. This is because environmental variables are set up for the database name, your MySQL username and password, and the secret session id.

  3. Run npm install in the bash terminal to download the application dependencies

  4. Log into MySQL by running mysql -u root -p in the command line and enter your MySQL password.

  5. Run source db/schema.sql to create the travel_lovers_db database. If you would prefer to have preseeded data, run npm run seeds instead.

  6. To exit MySQL run quit.

  7. Then you can run npm start to start the server. This will run SASS and Nodemon at the same time.

Jest Test

  • Run npm test to run Jest for tests on constructors

Insomnia Routes

Insomnia was used to seed and test the routes for this app. There is no command for running these tests.

  1. To test the application, download insomnia. For more information on Insomnia, follow this link: https://docs.insomnia.rest/.

  2. Run npm run seeds in the command-line to get preseeded data.

  3. Run npm start to start the server

  4. Go to Insomnia and test for the route you want to test. Make sure to change the route from GET to POST, PUT, Or DELETE depending on what you want to test for.

  5. The routes will be as follows (change users to posts or comments if you would like to test those routes and change :id to the id of the route you are testing for):

Insomnia URL Examples

User Route Screenshots

  • GET (all users): get-all-users
  • GET (one user): get-user-id
  • POST: post-user
  • PUT: put-user
  • DELETE: delete-user

Place Routes Screenshots

  • GET (all places): get-all-places
  • GET (one place): get-places-id
  • POST: post-places
  • PUT: put-user
  • Delete: delete-places

Questions

If you have any questions about this projects, please contact me directly at [email protected]. You can view more of my projects at https://github.com/nicnolen.

You might also like...

A wrapper library for Jitsi Meet that adds audio spatialization, to be able to create virtual meeting rooms.

A wrapper library for Jitsi Meet that adds audio spatialization, to be able to create virtual meeting rooms.

A wrapper library for Jitsi Meet that adds audio spatialization, to be able to create virtual meeting rooms.

Dec 27, 2022

TrackIt - Single Page Application that helps the user track their habits.

TrackIt - Single Page Application that helps the user track their habits.

TrackIt - Single Page Application that helps the user track their habits. Implemented with JavaScript/React and an API server which enables the user to sign-in or sign-up in the app.

Apr 13, 2022

Insider Unlocked is an ongoing web application

Insider Unlocked is an ongoing web application we have been co-developing for the past few months which aggregates stock trading data of US senators and presents it in a digestible manner for the average retail investor

Feb 13, 2022

RANDM - a dating application that helps users find matches through randomization

RANDM - a dating application that helps users find matches through randomization

RANDM - The Random Dating App RANDM is a dating application that helps users find matches through randomization. While other dating apps on the market

Oct 31, 2022

NestJS module for adding translations to the application, with a pipe for translating validation errors

nestjs-translates NestJS module for adding translations to the application, with a pipe for translating validation errors Installation npm i --save ne

Jul 26, 2022

API routes are great for APIs, but for small projects where you have to access server data or hide application logic, you can just call a server function from the client.

API routes are great for APIs, but for small projects where you have to access server data or hide application logic, you can just call a server function from the client.

Mar 6, 2022

A PHP Laravel web application that uses most of Laravel technologies to build that gym system

A PHP Laravel web application that uses most of Laravel technologies to build that gym system

A PHP Laravel web application that uses most of Laravel technologies to build that gym system.The System is based on rules. Admin, City Manager, Gym Manager. All Crud operations running using data tables.

Dec 29, 2022

This web application retrieves real live data from the SpaceX API

This web application retrieves real live data from the SpaceX API

This web application retrieves real live data from the SpaceX API. It provides commercial and scientific space travel services, by allowing users to book rockets and join selected space missions.

Aug 9, 2022

The perfect library for adding search, sort, filters and flexibility to tables, lists and various HTML elements. Built to be invisible and work on existing HTML.

List.js Perfect library for adding search, sort, filters and flexibility to tables, lists and various HTML elements. Built to be invisible and work on

Jan 1, 2023
Comments
  • create places api routes

    create places api routes

    User Story WHEN I test the GET route for all the places THEN I should see all the places with a city name and a date WHEN I test the GET route for a single place THEN I should see the place by its ID WHEN I test the POST route for a place THEN I should be able to input a city name and a date WHEN I test the PUT route for a place THEN I should be able to update the city name or the date by place id WHEN I test the DELETE route for a place THEN I should be able to delete the place

    enhancement 
    opened by miguelxosorio 0
  • Add authentication (express-session and cookies)

    Add authentication (express-session and cookies)

    User Story

    WHEN I choose to sign up THEN I am prompted to create a username and password

    WHEN I click on the sign-up button THEN my user credentials are saved and I am logged into the site

    WHEN I revisit the site at a later time and choose to sign in THEN I am prompted to enter my username and password

    enhancement 
    opened by nicnolen 0
  • Add User routes

    Add User routes

    User Story WHEN I try to look up all users, look up users by id, make a new user, update a user, or delete a user THEN the correct CRUD route is used to access that information

    enhancement 
    opened by nicnolen 0
  • Create a login page

    Create a login page

    User Story WHEN I first visit the site THEN I am prompted to either sign up or sign in

    WHEN I choose to sign up THEN I am prompted to create a username, email, and password

    WHEN I click on the sign-up button THEN my user credentials are saved and I am logged into the site

    WHEN I choose to login THEN I am prompted to put in an email and password to be authenticated

    WHEN I revisit the site at a later time and choose to sign in THEN I am prompted to enter my username and password

    enhancement 
    opened by nicnolen 0
Owner
Nicholas Nolen
Web Developer working primarily in JavaScript
Nicholas Nolen
FriendAdvisor is a mobile app with a focus on allowing friends and family to coordinate and receive text notifications about upcoming group events.

FriendAdvisor is a mobile app with a focus on allowing friends and family to coordinate and receive text notifications about upcoming group events.

Brad Johnson 4 Sep 29, 2022
💬 Real-time chat application prototype that can summarise the entire chat log

Chat summarizer ?? Disclaimer! This is a prototype and a fun project that I've been working on and it is not ready for production. It was done in a fe

null 5 Jan 22, 2022
A simple server application that allows you to perform Wake-on-LAN remotely with a web interface

WoL Helper A simple server application that allows you to perform Wake-on-LAN remotely with a web interface. Usage Install: npm install -g wol-helper

Hongbo 5 Jul 27, 2022
A simple implementation of a task list application that can be used to add, remove, edit and check users tasks

"To-do list" is a tool that helps to organize daily activites. It simply lists the things which are needed to be done and allows user to mark them as complete. In this step of project, the CRUD (create, update, delete) methods are implemented. This simple web page is built using webpack and served by a webpack dev server.

Zahra Arshia 5 Mar 28, 2022
A user script for the web that allows you to view and edit files in the Godot Web Editor

Godot-Web-File-Manager This is a user script for the web that allows you to view and edit files in the Godot Web Editor. You can even use this to enab

Roujel Williams 4 Jan 31, 2022
A code that allows you to get custom spotify rich presence

Spotifycord A code that allows you to get custom spotify rich presence! The index.js is the main file. server.js prevents your repl from going to slee

Phantom 19 Oct 7, 2022
Math Magician is a single Page App that allows users to perform simple math calculations

Math Magician is a single Page App that allows users to perform simple math calculations

levy_ukwishaka 11 Apr 9, 2022
This is my To-do-list project for my Javascript module at Microverse.

To do List This is a To do list project built for learning purposes. Built With HTML Bootstrap Javascript CSS HTML Webpack How to use it Clone the rep

Jonathas Tavares 4 Oct 8, 2021
🔬 list user's npm pkgs sorted by monthly downloads

npm maintainer dash list a user's npm packages sorted by monthly downloads very experimental proof of concept, not to be relied upon even a little bit

Nate Goldman 3 Feb 15, 2022
Create explorable explanations and interactive essays.

Tutorials | Examples | Docs | Chatroom | Mailing list | Twitter What is Idyll? For an introduction to Idyll, API reference, examples, and tutorials, p

Idyll 1.9k Dec 27, 2022