Final Project: Photographer Portfolio Website

General Assembly WDI NYC September, 2107

The Master Mind

• Asher Shaheen

Deployed Link: Eric Wiley

Description

The project entails a portfolio website for a NYC Photographer. The website has two interfaces one for the CLIENTS and the other for the PHOTOGRAPHER. A client has access to all of the photographer's work (PICS), an option to view photographer's schedule based on his bookings and an option to create a BOOKING. Photographer has an option to VIEW and DELETE all of his BOOKINGS and an option to upload his work (PICS) to a cloud server and ability for his clients to view those uploads on his page.

User Stories

• User should be able to see the Bio page which includes all the content for the Photographer
• User should be able to Register
• User should be able to Login after Registering
• User should be able to Book an appointment
• Once an appointment is booked, Photographer should be able to receive an email notification stating that a User has booked an appoointment
• Photographer should be able to Register & Login and should be able to see his Calender
• Photographer should be able to confirm appointments on his calender
• Photographer & the client should be able to see all of the appointments on the calender
• Photographer should be able to upload his work(pics, videos) to rails DB Source Here

Sourced Technologies

• REACT: Frontend UI
• Rails: Used as an API to save all the content for the photographer
• Rails Action Mailer - For Email Handlings Source Here
• Coudinary - To Store all the pics (references will be saved in Rails DB)
• Dropzone - For pics Uploads
• React Big Calendar - Display all bookings on a Calendar
• Moment & Moment-Duration-Format (Parsing Dates & Times received from API Response)
• MailGun - For email handlings / forwardings

Code Snipets

Drop Zone - Image Uploads

<Dropzone
                accept="image/jpeg, image/png, image/jpg"
                onDrop={(files, reject) => this.uploadFile(files, reject)}>
                {({ isDragActive, isDragReject, acceptedFiles, rejectedFiles }) => {
                        return this.state.accept.length || this.state.reject.length
                            ? `Accepted ${this.state.accept.length}, rejected ${this.state.reject.length} files`
                            : "Drag a Pic or Click in the box to upload a picture";
                }}
                </Dropzone>
                {this.renderUploadedPic()}
                <aside>
                    <h3>Accepted files</h3>
                    <ul>
                        {
                        this.state.accept.map(f => <li key={f.name}>{f.name} - {f.size} bytes</li>)
                        }
                    </ul>
                    <h3>Rejected files</h3>
                    <ul>
                        {
                        this.state.reject.map(f => <li key={f.name}>{f.name} - {f.size} bytes</li>)
                        }
                    </ul>
                </aside>

Snap Shot of File Structure (Front End)

|_ client
    |_ node_modules
    |_ public
    |_ src
        |_ assets
        |_ components
        |    |_ AdminBooking.jsx
        |    |_ Appointment.jsx
        |    |_ Bio.jsx
        |    |_ Calendar.jsx
        |    |_ Dash.jsx
        |    |_ Home.jsx
        |    |_ ImageUpload.jsx
        |    |_ LoginForm.jsx
        |    |_ Nav.jsx
        |    |_ RegisterForm.jsx
        |
        |__ modules
        |    |_ Auth.js
        |
        |__ App.js        
        |__ App.css
        |__ index.js
        |__ index.css
        |__ registerServiceWorker.js

Installation Instructions

• bundle install from the _MAIN PROJECT FOLDER & yarn install from THE CLIENT FOLDER to install all dependencies

Loose Ends

• Parsing the dates correctly which are being fetched from the DB
• Creating an option for the admin to EDIT registered USERS
• Email forwardings