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.
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);