EventSite

EventSite is a fullstack web application, inspired by EventBrite. It was built using Rails and PostgreSQL on the backend, and React with Redux on the frontend. Design and production occurred under a 10 day timeframe, and more features will be added soon.

Live Link

Features

• All users can view individual or a list of events.
• Logged in users may create a new event.
• When creating an even, users can decide to use their own name or a company name.
• Logged in users can see a list of all the events they created, and edit or delete them.
• User authentication is protected by BCrypt.

Login and Sign Up

In order to either log in or sign up, users are directed to the sign in form, into which the user puts their email. Upon submit, the application queries the database for whether or not that email already exists, and redirects the user to either the login page or sign up page.

handleSubmit(e) {
  e.preventDefault();
  this.props.lookUpUser(this.state.email).then(res => {
    if (res.found.found === "found") {
      return this.props.history.push("/signin/login");
    } else if (res.found.found === "not found") {
      return this.props.history.push("/signin/signup");
    } else {
      return (<LookUpFormContainer email={res.found.email} found={null}/>)
    }
  })
}

This found property ensures that a user can only either go to the sign up form or the login form, by checking the found property and authenticating that a user is not logged in.

Not Found

Found

const EmailAuth = ({component: Component, path, loggedIn, email, exact}) => (
  <Route path={path} exact={exact} render={(props) => (
    !loggedIn && email ? (
      <Component {...props} />
    ) : (
      <Redirect to="/signin" />
    )
  )}/>
);


const mapStateToProps = state => {
  return {loggedIn: Boolean(state.session.currentUser), email: Boolean(state.session.lookUp.email)};
};

Most pages of the website are accessible without logging in or signing up; however, if users, who are not logged in, try to access pages that require login, they will be redirected to the sign in form.

Once on the sign up or login form, the pencil button allows users to return to the sign in page to edit their email if they need to. To accomplish this, the email is sent back to the sign in page, while the found property is reset to null.

Logged Out

Logged In

handleClick(e) {
  e.preventDefault();
  this.props.resetFound(this.props.email);
  this.props.history.push('/signin');
}

Events

Users are able to view, edit, and delete their events.

Edit

Delete

Future Features

• Event Organizers can create tickets with a set quantity and price
• Add categories to events and organize events by category
• Allow users to follow other users
• Implement a search function for fast look up of events
• Use AWS for event and user images
• Add Google Maps