Welp

Welp is a fullstack front-end to back-end project. It is a clone of the Yelp website which shows businesses and business details. Welp enables a user to see a list of restaurants and view detailed information about the restaurant, and it's user reviews.

• Live Link Address: https://welp-yelp.herokuapp.com/
• Project Github: https://github.com/earlwoo/welp

MVP

• Ability to create new users and have user login with authorization
• Ability to login as a demo user with access to website
• Users can create, update, delete a review unique to the user and restaurant
• Users can view a business page with reviews
• Users can search through all restaurants

BONUS / STRETCH GOALS

• A better detailed search
• Profile page for user

TECHNOLOGIES USED

• Javascript
• Express
• Sequelize
• PSQL Database
• CSS
• JSX
• React
• Redux
• Yelp API

DATABASE SCHEMA

Technical Showcase

Making as few as possible requests to the database for expensive fetch calls. The store is updated at components that need the data. Data is either passed as a prop for immediate children components, but other components will otherwise subscribe to the state to have access to data.

   function App() {
    const restaurants = useSelector((state) => state.restaurants)
    const dispatch = useDispatch();
    const [isLoaded, setIsLoaded] = useState(false);

    useEffect(() => {
      dispatch(sessionActions.restoreUser()).then(() => setIsLoaded(true));
    }, [dispatch]);

    useEffect(() => {
      dispatch(restaurantActions.fetchRestaurants())
    }, [dispatch])

    useEffect(() => {
      dispatch(userActions.getUsers())
    }, [dispatch])

    return (
      <>
        <Navigation isLoaded={isLoaded} />
        {isLoaded && (
          <Switch>
            <Route exact path="/">
              <ResaurantsPhoto />
              <Restaurants restaurants={restaurants}/>
            </Route>
            <Route path="/:restId">
              <RestaurantDetails restaurants={restaurants} />
            </Route>
          </Switch>
        )}
        <Footer />
      </>
    );
  }

Search function does not make an API call, but rather queries through the store, which allows real time results while not making an expensive database fetch.

  if(searchTerm) {
          for (let key in restaurants) {
              if (restaurants[key].name.toLowerCase().includes(searchTerm.toLowerCase()) && !searchSet.has(key)) {
                  searchSet.add(restaurants[key])
              }

              restaurants[key].categories.forEach(category => {
                  if(category.toLowerCase() === searchTerm.toLowerCase() && !(searchSet.has(key))) {
                      searchSet.add(restaurants[key])
                      // searchArr.push()
                  }
              })

          }
      }

Both react props and the redux store is used to interchange and match data, instead of making fetch calls to the database to query for desired result

  const ReviewSlot = ({ review }) => {

    const users = useSelector(state => state.users)

    const { title, userId, content, rating, updatedAt } = review

    let reviewDate = updatedAt.split('T')[0].split('-')
    const [year, month, day] = reviewDate

    const reviewUser = users[userId]

TABLE USERS

• id (integer, primary key, not null)
• username (string, unique, not null)
• firstName (string, not null)
• lastName (string, not null)
• email (string, unique, not null)
• hashedPassword (string, not null)
• city (string)
• state (string)
• avatar (string)
• created_at (dateTime, not null)
• updated_at (dateTime, not null)

TABLE RESTAURANTS

• id (integer, primary key)
• name (string, not null)
• imageUrl (string, not null)
• photos (text)
• transactions (array)
• categories (text, not null)
• rating (integer)
• price (string)
• location (text, not null)
• coordinates (text)
• phoneNum (string, not null)
• created_at (dateTime, not null)
• updated_at (dateTime, not null)

TABLE REVIEWS

• id (integer, primary key, not null)
• title (string, not null)
• userId (integer, not null, foreign key)
• restId (integer, not null, foreign key)
• content (text, not null)
• rating (integer, not null)
• created_at (dateTime, not null)
• updated_at (dateTime, not null)

BACKEND ROUTES

USERS

• sign-up user (GET & POST)
• get all users (GET)

RESTAURANTS

• get all restaurants (GET)

REVIEWS

• get all tassk (GET)
• get specific task (GET)
• create new review (POST)
• update review (PUT)
• delete review (DELETE)

PROJECT CHALLENGES

* Figuring out how to make the least amount of calls to the database and utilizing the redux state for data
* Deciding which components have access to which slice of state and how to make the data accessible to other components by either props, or subscribing to the store
* The re-rendering nature of React, and understanding how those re-renders affect the entire components structure, while also being mindful of what causes the re-render

ENVIORNMENT DEPENDENCIES/INSTALLATION

• Bcryptjs
• faker.js
• Cookie parser
• Csurf
• Express
• Heroku