eventdark is a full-stack web product cloning eventbrite.com, and using thematic content from HBO's WestWorld to demonstrate the site's features and branding potential. eventdark is a responsively designed single-page web app built from the backend with Ruby on Rails 5.2 RESTful routes API on top of a PostgreSQL object-relational database supplemented with ActiveStorage/Amazon Web Services cloud storage for image files. The eventdark web app's frontend uses Reactjs-Reduxjs architecture bundled by webpack 4.0 and npm. Entire site was delivered within a hard 12 day deadline.
- Users can browse events by category and search by event name:
- Site is mobile-first reponsive based purely on native CSS3 design using css flex and grid properties
- User account creation and session authentication using BCrpyt encryption and session cookies
- Users can become event organizers: creating and editing their own events
- Events contain images and descriptions, dates and times:
- Users can register for events and track the events for which they have tickets
- Events dynamically track availability based on new registrations and preset capacity
Ruby on Rails customized controller logic
class Api::EventsController < ApplicationController
def index
cat_name = params[:category]
if cat_name
if cat = Category.find_by(category: cat_name)
@events = cat.events
render "api/events/index"
else
letter = params[:category][0].upcase
@events = Event.where("name LIKE :prefix", prefix: "#{letter}%")
if @events.length > 0
render "api/events/index"
else
render json: ["No results for that search"], status: 404
end
end
else
@events = Event.with_attached_photo
render "api/events/index"
end
end
def show
@event = Event.find_by_id(params[:id])
if @event
render "api/events/show"
else
render json: @event.errors.full_messages, status: 404
end
end
def create
@event = Event.new(event_params)
@event.organizer_id = current_user.id
@event.location_id = current_user.id
if @event.save
render "api/events/show"
else
render json: @event.errors.full_messages, status: 422
end
end
def update
@event = Event.find(params[:id])
if @event.update(event_params)
render "api/events/show"
else
render json: @event.errors.full_messages, status: 422
end
end
private
def event_params
params.require(:event).permit(:photo,
:name,
:organizer_id,
:description,
:price, :capacity,
:date, :time,
:location_id)
end
end
Higher Order React Component:
import React from 'react';
import { connect } from 'react-redux';
import EventForm from './event_form';
import { fetchEvent, updateEvent } from '../../actions/event_actions';
import { Redirect } from 'react-router-dom';
const mapStateToProps = (state, ownProps) => {
const currentUserId = [state.session.id]
const currentUser = state.entities.users[state.session.id]
const defaultEvent = {
name: '',
description: '',
price: '',
date: '', time: '',
capacity: '',
photoFile: '',
};
const event = state.entities.events[ownProps.match.params.eventId] || defaultEvent;
const formType = 'Update Event';
const errors = state.errors.eventErrors || [];
return { event, formType , errors};
};
const mapDispatchToProps = dispatch => {
return {
fetchEvent: id => dispatch(fetchEvent(id)),
action: (event,id) => dispatch(updateEvent(event,id)),
};
};
class EditEventForm extends React.Component {
componentDidMount() {
this.props.fetchEvent(this.props.match.params.eventId);
}
render() {
const { action, formType, event, errors } = this.props;
return (
<EventForm
action={action}
formType={formType}
event={event}
errors={errors} />
);
}
}
export default connect(mapStateToProps, mapDispatchToProps)(EditEventForm);
- Expand user-as-organizer features to include organizer profiles, accessing information about incoming registrations, and see event registerees
- Expand event search functions to include search by time and description
- Integrate with Google Maps API to tag events by location and allow location-based event search
- Expand user tools: bookmarking events for future reference and following a particular event organizer