Skip to content

First and third iteration of FE repo utilizing React and TypeScript, connected to custom API created in Ruby on Rails , features an interactive map built with Leaflet and GeoJSON. Styled with Tailwind CSS for responsiveness, it includes error handling, user authentication, and a comprehensive testing suite using Cypress.

Notifications You must be signed in to change notification settings

2308-Bread/rails_bread_fe

Repository files navigation

Belongea's Boulangerie

Visit the bakery

💻 Tech Stack

TypeScript React HTML5 CSS3 Visual Studio Code GitHub NPM React Router Cypress Vercel YAML Notion Postman Slack Miro Github Actions Heroku Ruby on Rails CircleCI

📕 Abstract

This project was born out of a love for bread of all kinds. We decided to create an interactive resource connecting a user to breads from across the world. With just a click on a map, a list of breads with cultural information about the tradition of bread-making from that country is displayed, allowing the user to learn more about regional breads. Selecting a bread displays more specific information about that type of bread and also shows a recipe. We wanted to showcase not only the diversity and variety of breads of the world but provide a recipe for the user to adventure into recreating it at home.

We are currently working on Part 1 of the project in which our information is from a handrolled Rails database but in Part 2, we plan to utilize AI to generate a much bigger variety of options for every country in the world. Leveraging AI in this way will allow us to focus on performance and user experience rather than populating a database with information for thousands of breads.

📖 Context

This project was created in an 11 day sprint and is currently in v1 stage of the two-part Capstone project. It was designed, engineered and created by a full-stack team in mod 4 at Turing School of Software and Design.

🏄 Contributors 👋

Front End Team:

Bobby Steckline | Github

Deanna Stevens | Github

John Clay O'Leary | Github

Back End Team:

Cory Powell | Github

Eric Belongea | Github

📌 Planning:
📊 Project Boards

Our GH Project Board

Our Miro Board

👀 Preview of App










💾 Installation Instructions

To get this app running on your computer:

  1. Clone this client repository to your local machine by using the command: git clone [email protected]:2308-Bread/rails_bread_fe.git in terminal.
  2. Navigate (cd) to your local directory containing the repository
  3. Run npm install to install node dependencies
  4. Run npm start to start the development server
  5. Your web browser should navigate to http://localhost:3000/

👾 Challenges

  • Looking for and then deciding to build our own bread APIs
  • Integrating an interactive mapping component with Leaflet
  • Creating two iterations, the first built for our C# API and this one for our Rails API

💫 Wins

  • Utilizing Leaflet mapping with a custom GeoJSON file for our countries
  • Group teamwork made planning, communication, and collaboration very smooth
  • Refactoring this repo for a restructured JSON response after forking off the C# iteration

About

First and third iteration of FE repo utilizing React and TypeScript, connected to custom API created in Ruby on Rails , features an interactive map built with Leaflet and GeoJSON. Styled with Tailwind CSS for responsiveness, it includes error handling, user authentication, and a comprehensive testing suite using Cypress.

Topics

Resources

Stars

Watchers

Forks