nerdbrite

Check out a live version of nerdbrite here: Nerdbrite Live

Nerdbrite is a full-stack clone of the popular website eventbrite, which is used for booking tickets for events (both free and paid). It was built using Reactjs, Redux, Node.js, PostgreSQL, and Sequelize.

Welcome View:

Events View:

React Store Shape:

var store = {
    session: {},
    events: {
        eventId: {
            eventData,
            user: (userData of host),
            categoryType: "category string",
            venueId
        },
        optionalOrderedList: []
    },
    tickets: {
        ticketId: {
            ticketData,
            event: { eventData for this event },
            user: {userData of who booked ticket},
            Venue: {Venue name},
            Category: {Category name/type}
        },
        optionalOrderedList: []
    }
}

Challenges of This Project

There were many challenges but two in particular stand out to me...

1.) Getting the event edit form to maintain its data even upon refresh. I tried all sorts of conditional rendering, until finally I found the solution - putting it all in an if statement in a useEffect block, rather than having conditionals on each one.

2.) Dealing with the Javascript date issues between my local machine and Heroku. I first realized that whenever I edited an event, it would cause the day to go back by one with each edit. I fixed this on my local machine by using Date.getTime() and getTimeZoneOffset(). This worked until it was on Heroku, since it turns out that Heroku uses UTC time. I ended up implementing a helper function in the API routes to convert the dates to a proper format before sending them off into the database:

function fixDate(date) {
  const newDate = new Date(date);
  newDate.setUTCHours(0, 0, 0, 0);
  return newDate;
}

In addition to also in the front end fixing the fact that the dates were rendering incorrectly due to timezones:

new Date(event.date).toLocaleString("en-CA", {
  timeZone: "UTC",
  year: "numeric",
  month: "numeric",
  day: "numeric",
});

I also realized the importance in React of reusing components to simplify coding. I did a separate form for creating events and editing events, which ended up taking extra time to debug - in the future I would make a separate form component and then render it in the necessary areas, and drive down the necessary states into the forms via props.

Project Name:	Nerdbrite
Clone:	Eventbrite
Feature List:	https://github.com/kurikurichan/nerdbrite/wiki/Features-List
DB Schema Diagram:	https://github.com/kurikurichan/nerdbrite/wiki/Database-Schema
Live Link:	https://nerdbrite.herokuapp.com/

Installation instructions

• clone this repository from Github
• npm install all dependencies
• install postgreSQL
• create a user with CREATEDB privileges, and a database
• create a .env file, insert that information
• run the migrations & seeder data (npx dotenv sequelize db:migrate, npx dotenv sequelize db:seed:all)
• npm start on frontend and backend to run program
• enjoy!

Future Features

• Fix design of event page
• Patch seeder data to create custom dates that are ahead of current one
• Make event information a longer section with RTE
• Search function
• "Manage my Events" page