DEV Community: Santos

Simple React e-commerce Store

Santos — Fri, 15 Apr 2022 15:17:56 +0000

I've created a super simple e-commerce application with react, react-redux, react-router, and redux-persist.

Each url or "route" was made with react-router in the react index.js file.

        <BrowserRouter>
          <Routes>
            <Route path="/" element={<App />} />
            <Route path="/cart" element={<Cart />} />
            <Route path="/products" element={<ProductContainer />} />
            <Route path="*" element={<Error />} />
          </Routes>
        </BrowserRouter>

All of the products in the application were fetched and moved around using the useDispatch and useSelector functions from react-redux.

There were two simple actions made to move items to the cart and to remove them as well.

function rootReducer(state = initialState, action) {
  switch (action.type) {
    case ADD_TO_CART:
      return {
        ...state,
        cart: [...state.cart, action.payload],
      };

    case REMOVE:
      return {
        ...state,
        cart: state.cart.filter((item) => item !== action.payload),
      };

    default:
      return state;
  }
}

Redux-persist was necessary to use to prevent the items in the cart from disappearing when the user would switch to another page.

There was definitely more functionality I wanted to add to this little application, but I either ran out of time or couldn't figure out how to work other installed packages.

But if you want to play around with the code or read a little bit more about this application, checkout the github for it here.

First Fullstack Project: Tixxly

Santos — Mon, 21 Mar 2022 01:27:15 +0000

I'm now 10 weeks into my bootcamp and was assigned to make a fullstack project with a partner. My partner Rayleigh came up with the idea to create a movie theatre website. We created this project using various means like Node, ElephantSQL, EJS, Seuquelize and more. Much of our design and functionality were based off other theatre apps/websites. All of the movies displayed on our homepage are from The Movie Database API.

From the front page, users can choose the movie they want to reserve a ticket for from the available time. All of these times are gathered from a database we created. Our API is set to gather recent releases from their database, so our homepage will change every few days with what movies are shown. Although because we have to manually insert times and movies to our own database to be displayed on the reservation page, some may end up having no showtimes.

After that, we allow the user to select some concessions which also come from one of the tables in our database.

Once the user chooses their concessions, they just have to fill out a form with their name and will be redirected to a page with their ticket information.

This was the first time our bootcamp had an assignment involving a partner, so we had to figure out how to split the work. Rayleigh was a powerhouse through this whole project. Major props to her for putting together so much of this project and designing the website. Some of the challenges we faced at the start was figuring out how our database and tables would be setup and connected. Another slight hurdle was getting the information from our database to show up on certain pages.
Here's our projects github if you want to see the code.

Front-end Project

Santos — Fri, 25 Feb 2022 06:11:57 +0000

I had an assignment for my bootcamp to create a front end involving DOM manipulation and an API the result of this project involved many hours of trying to figure out how the API I chose worked, and how to not make a complete abomination of CSS.

The API I used was from https://www.igdb.com/api. I chose this because it appeared to have a large database involving video games and would be fun to work with. It was absolutely not fun to work with. The API involves creating a and linking a https://www.twitch.tv to obtain a Client ID and a Client Secret. I then needed to make a POST request through Twitch to obtain a token to finally be able to use the API. Now it was time to figure out this API. This bootcamp taught me how to fetch data from APIs with the use of GET and Keys. Unfortunately for me, this API I chose only used POST and required the use of Headers and the Body to use it. For someone who had only learned how to use APIs for a few days, this was a struggle to figure out. The IGDB documentation is extremely hard for to figure out for someone new to APIs (like me). There weren't that many good examples of how to setup my JavaScript and how to get the information I wanted. Thankfully with the help of my instructor, we were able to get some data from the API to be on my HTML page.

I could probably go on for many paragraphs about the struggle and frustration this API caused me, but I'll stop so I can just show a screenshot of one of the pages I created.

This is probably my favorite page just because of how fun it is to see how many different games there are in this database. I used the random number function from 1 to 25,000 to display a random game every time the page is refreshed. The API has over 100,000 games, but I realized the higher number it chose, the less likely the database had a cover art or even a description of the game.

Anyway, this was a cool project to work on, and if anyone else out there has had any experience with the API I used I'd love to hear about it!