Projects

YelpCamp

YelpCamp is a Responsive Full-Stack Web App built with the MEN(MongoDB,Express,Node.js) Stack which takes a yelp-like approach to campsites around the world. For live demo use account (username: guest1 password: 1234)

Features:

Authentication:
  • User accounts (must have unique email)
  • User profile pages
  • Content creation and interaction restricted to users
  • Admin code for admin account creation
  • Users with accounts can create, comment on, and review campgrounds
  • Users with accounts can edit and delete any of their posts, comments, or reviews
  • Users without accounts can visit other users profile pages
  • Users without accounts can view any campground, comment, or review
  • Admins can edit and delete any posts, comments, or reviews

Functionality:
  • Campground posts come with a picture, a description, price per night, contact info, hours of operation, address, comments, reviews, and a star rating(1-5) based on an average of the reviews
  • Profiles with unique email and username, password reset, and avatars
  • Search bar to help find specific campgrounds
  • Ability to add comments directly on the campground page
  • Pagination for campground list(8 per page)
  • View all reviews page for each campground
  • Ability to visit user profiles and see their which campgrounds they posted
  • Login/Logout (username and avatar displayed at the top when logged in)
  • Flash messages for login, logout, feedback, and warnings
  • Forgot password/password reset
  • Upload photos stored on your computer

Technologies Used(languages, frameworks, packages, etc.):
  • HTML5
  • CSS
  • JavaScript
  • Bootstrap 4
  • Node.js
  • Express
  • ejs
  • Mongoose
  • jQuery
  • Passport
  • Passport-local
  • Connect-flash
  • Multer
  • Cloudinary
  • Faker
  • Nodemailer

Database:
  • MongoDB

Host:
  • Heroku
Read More

Live Demo Source Code

React Colors

React Colors is a Responsive React App that allows users to create and customize color palettes with the ability to copy individual color codes(hex or rgb) to your clipboard for easy use

Features:

Create New Palette:
  • Design custom color palettes in the create-a-palette menu
  • Each custom palette can be named and given an emoji
  • Generate random colors in create-a-palette menu
  • Clear palette in create-a-palette menu
  • Delete colors in the create-a-palette menu
  • Draggable color boxes to customize the order in the create-a-palette menu

Color Palettes:
  • Made from 1-20 different colors
  • Each color has 9 different shades(4 light, 4 dark)
  • Each palette has a unique name
  • Each palette has an emoji

Functionality:
  • Text color changes based on the color boxes individual luminance(i.e. Dark colors have white text)
  • Slider to change the shade of the colors in the palette
  • Can change color codes between hex, rgb, and rgba
  • Material ui snackbar confirmation for color code change
  • Copy color code to clipboard
  • Overlay confirmation for a color code being copied
  • Color picker to create custom colors for custom palettes
  • Ability to drag color boxes to rearrange your custom palette in the create-a-palette menu
  • Dialog option to name and save the new palette
  • Dialog option to delete and cancel delete palettes
  • More option on individual colors will list all 9 shades of that specific color
  • Emoji picker for custom palettes

Technologies Used(languages, frameworks, packages, etc.):
  • HTML5
  • CSS
  • JavaScript
  • React
  • React Router
  • JSS
  • React-Transition-Group
  • React-copy-to-clipboard
  • Material-UI
  • Chroma-js
  • React-Sortable-Hoc
  • rc-slider
  • Emoji-mart
  • Color-picker-form
  • Local Storage


Host:
  • Firebase




Read More

Live Demo Source Code

Other Projects:

Blackjack game

  • Built with Python
  • Runs in the terminal
  • Running chip count
  • Supports 1-4 players vs the dealer
  • Buy-in to continue chip count or start a new game
  • Rules page
  • Up to 5 decks
  • The decks are shuffled when there are no cards remaining

Blog Site

  • Built with Node.js
  • MongoDB database
  • Uses RESTful routes
  • User authentication
  • Admins/admin page
  • Ability to create new blogs, update old blogs, and delete existing blogs with CRUD operations
  • Allows users to leave comments on blogs

Discord Bots

  • Built with Python(discord.py) and JavaScript(discord.js)
  • Send embed messages in text channels
  • Join/leave voice channels
  • Play audio clips or music from Youtube or local storage
  • Send users info on their ping to the server
  • Delete or clear messages in text channels
  • Send "dad" jokes
  • Send posts from subreddits (i.e. puppy pictures from r/puppies)

Mock-up Site for local business

  • Built with HTML, CSS, JavaScript, and Bootstrap 4
  • Overhaul of existing wordpress site
  • Modernized look and layout
  • Improved performance and functionality