/awp-pictures

Picture website project for advanced web programming course

Primary LanguageJavaScript

Overview

My project is broken into two different code bases, a PHP api created with the Lumen framework and a static client website created with React and Semantic UI.

API

The api could almost be seen as a totally functioning version of the project, just without an interface. It provides all the real functionality to the client, the client is just making HTTP requests to the api whenever it wants to do something. The api knows absolutely nothing about the client and could be easily reused for a mobile app, for example.

The api uses a token based authentication system. Upon registering or logging in, the user is given a unique api token that is sent up with subsequent requests. This token allows the api to identify the user making the request and determine who is uploading a picture or trying to delete a comment (and whether or not they are allowed to). The api validates against any bad data and authorizes any actions being performed by the user.

Client

The client uses React for templating and components and Semantic UI for stylized components like buttons, inputs, etc. React allowed me to easily put together pages as javascript classes that contained everything needed to show the page, including the pages state and how that state is rendered on the pages template.

The client is eventually built for production which results in a completely static collection of html, javascript, and css. This static website is simply served to the user, and all http requests to the api are made locally via ajax on the users machine.

What files to look at

The frameworks I used create a lot of files that you really don't need to look at. I recommend looking over the following files in the following order, the code should document itself well enough.

Database

  • db/awp-pictures.sql: has all of the sql to create the structure of the database + comments on the structure itself

API

Client

Elvis setup info

You don't need to read this part Professor Provine, just here for my reference.

API Setup

  1. cd awp-pictures/api/
  2. composer install
  3. chmod 755 -R ../../awp-pictures
  4. chmod 777 -R storage
  5. cd ../
  6. mysql -u richealp7 -p richealp7 < db/awp-pictures.sql

Client setup

  1. cd awp-pictures/client/
  2. npm install
  3. npm run build
  4. Add the following to a .htaccess file inside awp-pictures/client/build/
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /~richealp7/awp/awp-pictures/client/build/index.html [L]
</IfModule>
  1. chmod 755 -R ../../awp-pictures
  2. cd awp-pictures/api/
  3. chmod 777 -R storage