Welcome to The WanderList! The WanderList web app was developed as a component of the Berkeley Coding Bootcamp Project 2. A remarkable web application designed exclusively for travel enthusiasts and adventure seekers. Our platform offers you a seamless experience to create and personalize your own travel wishes while immersing yourself in captivating travel posts shared by fellow adventurers. With just a click, you can save inspiring ideas to your account, keeping them readily accessible at any time. Embark on an exciting journey through the world of travel dreams and capture the essence of your wanderlust.
- General Information
- Deployed Site
- Preview
- Demo
- Description
- Technologies Used
- Installation
- Usage
- Credits
- Contact
- License
- How to Contribute
Experience the wonders of WanderList through our Heroku deployment!
To get an idea of the features for the site, watch our walkthrough video!
wanderlist-walkthrough.mp4
WanderList is built on the powerful foundation of Node.js, utilizing the expressive capabilities of the Express framework for flawless server-side development. Leveraging the MySQL database driver for Node.js, we ensure efficient data management and retrieval. With the integration of express-session and connect-session-sequelize, our application provides reliable session management while employing Sequelize for seamless and persistent session storage. Rest assured, your user authentication data is securely stored using bcrypt password hashing and encryption, prioritizing your online security. To enhance your browsing experience, we utilize the dynamic HTML template engine express-handlebars, enabling the rendering of captivating and interactive web pages. Moreover, we harness the potential of Bootstrap, a renowned front-end framework known for its vast collection of pre-built CSS and JavaScript components, ensuring a visually stunning and responsive web design.
The Wander List serves as your gateway to a world of travel possibilities. Join us today and let your travel aspirations come to life.
- node.js v18.12.1 - A scalable server-side JavaScript runtime;
- mySQL v8.0.33 - Open-source relational database management system.
- jQuery v3.6.0 - A JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax.
- bootstrap v5.2 - A popular front-end framework that provides a collection of pre-built CSS and JavaScript components for responsive web design.
- handlebars v4.7.7 - Template engine for rendering dynamic HTML templates.
- bcrypt v5.1.0 - Password hashing and encryption for enhanced security.
- sequelize v6.31.1 - ORM (Object-Relational Mapping) for interacting with relational databases in an object-oriented manner.
- connect-session-sequelize v7.1.6 - Integration of session management with Sequelize for persistent session storage.
- express v4.18.2 - Web application framework for building server-side applications.
- express-handlebars - Templating engine for rendering dynamic HTML templates.
- express-session v.17.3 - Middleware for managing session data in Express.
- mysql2 v3.3.1 - MySQL database driver for Node.js.
- nodemon v2.0.22 - Development tool for automatically restarting the server during code changes.
- dotenv v16.0.3 - Loading environment variables from a .env file.
- Heroku - Cloud platform for deploying and managing applications.
If you would prefer to see a local version of the site, follow the steps below:
- Clone the repository to your local machine.
- Navigate to the root directory of the cloned repository in your terminal.
- Run
npm installto install the dependencies. - Create a
.envfile in the root directory of the cloned repository. An example of the contents of the.envfile is shown below:DB_NAME=wanderlist_db DB_USER=root DB_PW=your_password SECRET=your_secret - Create the database by logging into mySQL and running
source db/schema.sql. - Seed the database by running
npm run seed. - Start the server by running
npm startornpm run nodemonif you have nodemon installed. - Navigate to
http://localhost:3001in your browser to view the site.
To explore our website, simply click on the provided link. For an enhanced experience, we highly recommend creating an account to unlock all the amazing features our website has to offer. However, rest assured that even without an account, users can freely browse and discover captivating travel blog posts from other users. It's important to note that saving these posts to your personal account will only be possible for registered users.
To create an account, click on the "Sign Up" button located in the top right corner of the homepage and complete the required fields. Ensure that your chosen username is alphanumeric and between 3 to 20 characters in length. The email address provided should be valid, and the password should be between 8 to 128 characters long, containing a mix of alphanumeric, uppercase, and special characters.
Once your account is successfully created, a world of possibilities awaits you. You can create your own customized travel wish list, dive into captivating blog posts shared by fellow adventurers, and save your favorite posts to your account using the convenient "Pin" icon, allowing you to track and celebrate your travel accomplishments.
In the "Discover" section, users can immerse themselves in a multitude of captivating travel blog posts crafted by fellow travel enthusiasts. If you've finished browsing through the posts and desire something fresh, simply click the "Discover Something New" button positioned on the left side at the top of the page, or utilize the input field on the right side to narrow down your search and find specific travel ideas that pique your interest, streamlining your search results.
In the "Pin" section, you have the ability to craft and store your very own travel blog wishes, ensuring easy access to them whenever you desire. Positioned on the top left side of the page, you can effortlessly browse through your personal pins, while also exploring the pins of other users that have been saved to your account. This feature offers flexibility, allowing users to modify or delete their pins at any moment, empowering them with complete control over their travel aspirations and preferences.
Within the profile section, you will find a convenient dropdown list that includes the "Settings" and "Log Out" options. By selecting "Settings," users gain the ability to modify their personal information, including their username, first and last names, and an optional self-description. Furthermore, users can easily change their avatar by either clicking on the avatar placeholder (for newly created accounts) or selecting their current avatar. Our website provides a diverse collection of travel-related avatars to choose from, allowing users to personalize their profile further.
In addition to these customization options, users can strengthen their account security by changing their password at any time. We prioritize the safety of our users' information. However, should a user no longer wish to maintain an account, there is also the option to delete it. Although, we believe that our website's offerings will captivate and inspire, making it unlikely that users would want to part ways with their account.
At the upper right corner of the navbar, you will find a convenient switch that allows users to toggle between dark and light modes. This feature enhances the overall user experience by providing the flexibility to customize the background color of our website. By selecting the preferred mode, users can create a more comfortable reading environment that suits their personal preferences, ensuring an enjoyable browsing experience.
In the footer of our website, you will find a comprehensive list of the technologies that were employed to develop this remarkable travel-related platform. These technologies served as the foundation for creating a user-friendly and captivating website. Additionally, we proudly acknowledge the dedicated efforts of our contributors who worked tirelessly day and night to bring this vision to life. Their expertise and commitment have resulted in the creation of an exceptional website that aims to provide an outstanding experience for our beloved users.
The following resources and individuals made invaluable contributions to the project:
-
Wanderlust is a free typeface. It was used for the title of the website in the navbar present on every page.
-
Hammersmith One is a free typeface readily available on Google Fonts. It was used in various capacities throughout the site such as with pin usernames.
-
Source Sans Pro is a free typeface readily available on Google Fonts. It was used in various capacities throughout the site such as with pin titles, locations, and text.
-
Favicon Converter provides a simple way to take any image and convert it to a favicon. The favicon for this project was created from this compass image created by Dimitry Miroliubov on FlatIcon.
-
Icons8 provide simple images and icons.
-
Matt Visiwig created an SVG background creator that provides many free options. The background image was created from this tool.
-
Shields.io provides the badges for the README.
-
Dighital icons were purchased for the avatar images.
-
SimpleBar is a custom scroll bar library that allows for replacing the default browser scroll bars.
-
Ian Lunn created an awesome library called Hover.css that adds some plug and play css animation classes. We used this for some of the moving icons on the page.
-
CodyHouse provides a lot of free resources for web developers. We used their Login Modal for the login/signup functionality.
- ChatGPT is a chatbot that uses GPT-3 to generate responses. The chatbot was used to come up with the site name.
Here are some insightful and informative blogs that were valuable resources:
- StackOverflow provided guidance for troubleshooting the project. Below are the links to key posts that contributed to our success:
- Regular Expressions for Validation
- Using #each in Handlebars templates
- Bootstrap Modal Class Issues
- Editting Bootstrap Popovers
- Setting Intervals for Bootstrap Carousel
- Olena Pashchenko - UserOlena
- Jennifer Rytikoff - jenryt
- Bandhavi Bendi - bbandhu
- Kevin Small - kevrev
- Joshua Dempe - JDempe
This project is open source and available under the MIT
Looking to contribute? Find out how at https://github.com/JDempe/WanderList!