Periodic Tables

A reservation system for fine dining restaurants.

The restaurant reservation app allows a user to manage a list of tables, and reservations for a restaurant.

There are multiple nav links the user may use: Dashboard: The default screen, shows the user the user a list of current tables and current status (occupied/free). A list of reservations for the current date (defaulting to today's date) and forward/back buttons to change date. The list of reservations is made up of cards showing data about the reservation such as name, phone number etc. 'Seat' and 'cancel' buttons are available only on unseated reservations. Search: Takes the user to /search and fetches all reservations from the database that match the entered phone number. New Reservation: Takes the user to /reservervations/new where they enter the necessary data to create a new reservation The backend has extensive middleware to ensure the knex POST request is not made with faulty data. New Table: Takes the user to tables/new. When the New Table form is filled out properly, this sends a POST request to the server to create a new table with status “free” and is added to the list of tables on the dashboard.

• Uses robust express middleware to reject any request containing incomplete, insufficient, or incorrect data.
• Utilizes Cross-Origin Resource Sharing (CORS).
• Uses a custom algorithm to ensure US mobile numbers are properly formatted.
• The app utilizes JS fetch calls, which trigger a backend response written in express/knex to query the PostGreSQL database.

More Details

We Love Movies

Find your next favorite movie!

Allows users to see lists of movies and nearby theaters. Uses fetch calls to retrieve data from the PostGreSQL database using Knex Main page displays a list of currently showing movies, each 'movie' in the list is a clickable card that takes the user to a page with extra detail about the selected movie 'All movies' nav link provides the user with a more in-depth version of the same list, containing ratings, a description, runtime etc.. There is also a 'more' button. When the 'more' button is clicked, or a card from the main page is clicked, the user the user is redirect to /movies/:movieId which displays all previous info, in addition to runtime, all reviews for this film (with ratings), and which theaters are currently showing this movie; Clicking the 'all theaters' nav link takes the user to a page which displays all theaters (pulled from the POSTgreSQL database via a join query written in Knex) with addresses, and a succinct list of which films are actively showing.

• Uses PostGreSQL database
• Manages complex joins using Lodash

More Details

Flashcard app

Personal study platform

A flashcard-style study platform built using react and styled with bootstrap. Key features include: New Deck: React component that allows the user to create a new deck (description and name) New Card: A prompt on every deck that allows the user to add 'cards' to that deck. Card: Every card in a deck must have a front and back, each card component Study: Clicking the 'Study' button on a deck takes you to a screen with the first card, you read the question, and when you have your answer you click 'flip' to see the answer on the back of the card to see if you were right. Card component: Every card has a 'next' and 'previous' button to move forward and backward (respectively) while studying as well as the afformentioned 'flip' button.

• Uses Bootstrap Breadcrumbs for easier navigation

More Details

Giganote

Streamlined Note Management with Real-time Editing, Dynamic Rendering, and Responsive Design

A React-based note-taking web application offers an intuitive platform for managing notes efficiently. Key features include: Note Viewing: A NoteView component that displays, views, and edits note titles and bodies. Note Editing: Real-time editing capabilities with controlled form inputs and state management. Note Deletion: Single-click removal of unwanted notes. Dynamic Rendering: Uses React's useEffect hook to refresh the note view when a new note is selected, ensuring updated displays.

• Adapts to various devices and screen sizes for optimal viewing.
• Integrates React development, state management, and user interface design, providing a practical, user-friendly tool for effective note organization.

More Details

ThinkfulBNB

Find your perfect vacation

Vacation rentals and unique homes website using HTML and CSS, providing users with a visually appealing and functional platform for exploring vacation rental options. The website includes the following key sections: Header: Section containing the logo and navigation menu, allowing users to easily navigate between different sections of the website. Search Form: The search form allows users to search for vacation rentals based on location, arrival and departure dates, and rental type. About Section: The "About" section provides users with information about the website and its services, accompanied by images illustrating vacation rental options. Ideas Section: The "Ideas" section showcases various vacation rental themes such as forest retreats, beaches, rustic cabins, and pet-friendly accommodations, accompanied by images. Host Section: Includes a "Host" section with information for users interested in becoming hosts on the platform, along with an image illustrating the host registration process. Footer: The footer section displayed the necessary copyright information.

• Uses mobile-first design principles

More Details

Recipe App

Keep track of your favorite recipes with ease!

The recipe management web application, built with React, offers a straightforward platform for users to add and organize recipes. Key features include: Recipe Creation Form: A "RecipeCreate" form component for entering details like name, cuisine, photo URL, ingredients, and steps. Form Handling: React state management captures and updates data dynamically during entry, ensuring smooth interactions. Submit Handler: A function to manage submissions, create new recipe objects, and clear forms. Input Validation: Basic checks to confirm all required fields are completed before submission. User Interface: An intuitive interface with labeled fields and placeholders assists users in the recipe creation process. Integration with Parent Component: The RecipeCreate component works with a parent component to manage and store recipe data effectively.

• Uses n-th child CSS method to vary recipe styling.

More Details

Decoder Ring

Encode and decode messages using classic ciphers.

The "Decoder Ring" web application offers tools to encode and decode messages using different cipher techniques. Caesar Shift: Allows encoding and decoding by shifting alphabet letters based on a specified number. Polybius Square: Encodes and decodes messages using numerical coordinates within a grid. Substitution Cipher: Users input a substitution alphabet to encode and decode messages.

• Features a user-friendly interface built with the Bootstrap framework, ensuring responsive design for optimal interaction on various devices.
• Manages form submissions for each cipher tool, validates input, and displays error messages as needed.
• Shows encoded or decoded messages in a dedicated area for each tool along with selector buttons.

More Details

Harvard University CS50 Introduction to Computer Science

An introduction to the intellectual enterprises of computer science and the art of programming.

An entry-level course taught by David J. Malan, CS50x teaches students how to think algorithmically and solve problems efficiently. Topics include abstraction, algorithms, data structures, encapsulation, resource management, security, software engineering, and web development.

• Languages include C, Python, SQL, and JavaScript plus CSS and HTML.
• Problem sets inspired by real-world domains of biology, cryptography, finance, forensics, and gaming.

More Details