Pablo Joyce chitter challenge

Gemfile

@@ -11,3 +11,14 @@ end
 group :development, :test do
   gem 'rubocop', '1.20'
 end
+
+gem "pg", "~> 1.4"
+
+gem "sinatra", "~> 3.0"
+gem "sinatra-contrib", "~> 3.0"
+gem "webrick", "~> 1.8"
+gem "rack-test", "~> 2.1"
+
+gem "rackup", "~> 1.0"
+
+gem "bcrypt", "~> 3.1"

Gemfile.lock

@@ -3,11 +3,24 @@ GEM
   specs:
     ansi (1.5.0)
     ast (2.4.2)
+    bcrypt (3.1.18)
     diff-lcs (1.4.4)
     docile (1.4.0)
+    multi_json (1.15.0)
+    mustermann (3.0.0)
+      ruby2_keywords (~> 0.0.1)
     parallel (1.20.1)
     parser (3.0.2.0)
       ast (~> 2.4.1)
+    pg (1.4.6)
+    rack (2.2.6.4)
+    rack-protection (3.0.5)
+      rack
+    rack-test (2.1.0)
+      rack (>= 1.3)
+    rackup (1.0.0)
+      rack (< 3)
+      webrick
     rainbow (3.0.0)
     regexp_parser (2.1.1)
     rexml (3.2.5)
@@ -36,6 +49,7 @@ GEM
     rubocop-ast (1.11.0)
       parser (>= 3.0.1.1)
     ruby-progressbar (1.11.0)
+    ruby2_keywords (0.0.5)
     simplecov (0.21.2)
       docile (~> 1.1)
       simplecov-html (~> 0.11)
@@ -46,18 +60,41 @@ GEM
       terminal-table
     simplecov-html (0.12.3)
     simplecov_json_formatter (0.1.3)
+    sinatra (3.0.5)
+      mustermann (~> 3.0)
+      rack (~> 2.2, >= 2.2.4)
+      rack-protection (= 3.0.5)
+      tilt (~> 2.0)
+    sinatra-contrib (3.0.5)
+      multi_json
+      mustermann (~> 3.0)
+      rack-protection (= 3.0.5)
+      sinatra (= 3.0.5)
+      tilt (~> 2.0)
     terminal-table (3.0.1)
       unicode-display_width (>= 1.1.1, < 3)
+    tilt (2.1.0)
     unicode-display_width (2.0.0)
+    webrick (1.8.1)
 
 PLATFORMS
   ruby
+  x86_64-darwin-20
+  x86_64-darwin-21
+  x86_64-linux
 
 DEPENDENCIES
+  bcrypt (~> 3.1)
+  pg (~> 1.4)
+  rack-test (~> 2.1)
+  rackup (~> 1.0)
   rspec
   rubocop (= 1.20)
   simplecov
   simplecov-console
+  sinatra (~> 3.0)
+  sinatra-contrib (~> 3.0)
+  webrick (~> 1.8)
 
 RUBY VERSION
    ruby 3.0.2p107

README.md

@@ -1,20 +1,25 @@
-Chitter Challenge
-=================
+# Chitter Challenge by Pablo Joyce
 
-* Feel free to use Google, your notes, books, etc. but work on your own
-* If you refer to the solution of another coach or student, please put a link to that in your README
-* If you have a partial solution, **still check in a partial solution**
-* You must submit a pull request to this repo with your code by 10am Monday morning
+[Getting Started](#getting-started) | [Using the application](#using-the-application) | [Running the tests](#running-the-tests) | [Design](#design) | [Screenshots](#screenshots) | [Technologies used](#technologies-used) | [Notes on test coverage](#notes-on-test-coverage)
 
-Challenge:
--------
+<p align="left">
+<img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/ruby/ruby-original.svg" alt="ruby" width="40" height="40"/>
+<img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/rspec/rspec-original.svg" alt="rspec" width="40" height="40"/>
+<img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/postgresql/postgresql-original.svg" alt="postgresql" width="40" height="40"/>
+<img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/git/git-original.svg" alt="git" width="40" height="40"/>
+<img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/github/github-original.svg" alt="github" width="40" height="40"/>
+</p>
 
-As usual please start by forking this repo.
+* This project is a solo Ruby project completed at the end of the web applications module of the Makers Academy bootcamp.
+* The application is built with the Sinatra web framework, rendering view files using ERB
+* The application uses a PostgresSQL database
+* The database connection is established in `lib/database_connection.rb` using the `pg` gem
+* Seed data for tests is included in `spec/seeds.sql`
 
-We are going to write a small Twitter clone that will allow the users to post messages to a public stream.
+## The Brief
 
-Features:
--------
+To create a basic Twitter clone that will allow the users to post messages.
+We were given the following user stories as a starting point:
 
 ```
 STRAIGHT UP
@@ -52,61 +57,130 @@ So that I can stay constantly tapped in to the shouty box of Chitter
 I want to receive an email if I am tagged in a Peep
 ```
 
-Technical Approach:
------
+We were given the following notes on functionality:
 
-In the last two weeks, you integrated a database using the `pg` gem and Repository classes. You also implemented small web applications using Sinatra, RSpec, HTML and ERB views to make dynamic webpages. You can continue to use this approach when building Chitter Challenge.
+* You don't have to be logged in to see the peeps.
+* Makers sign up to chitter with their email, password, name and a username (e.g. [email protected], password123, Sam Morgan, sjmog).
+* The username and email are unique.
+* Peeps (posts to chitter) have the name of the maker and their user handle.
 
-You can refer to the [guidance on Modelling and Planning a web application](https://github.com/makersacademy/web-applications/blob/main/pills/modelling_and_planning_web_application.md), to help you in planning the different web pages you will need to implement this challenge. If you'd like to deploy your app to Heroku so other people can use it, [you can follow this guidance](https://github.com/makersacademy/web-applications/blob/main/html_challenges/07_deploying.md).
+## Getting Started 
+[Top](#chitter-challenge-by-pablo-joyce) | [Use](#using-the-application) | [Tests](#running-the-tests) | [Design](#design) | [Screenshots](#screenshots) | [Tech](#technologies-used) | [Coverage](#notes-on-test-coverage)
 
-If you'd like more technical challenge now, try using an [Object Relational Mapper](https://en.wikipedia.org/wiki/Object-relational_mapping) as the database interface, instead of implementing your own Repository classes.
+At time of writing, this project has a version deployed on Render at [https://chitter-7pam.onrender.com/](https://chitter-7pam.onrender.com/). Please note that this may take 30 seconds or longer to 'spin up' as it is deployed on a free tier of Render.
+At some point in the future, this version may be taken down as Render only allows a single database instance on the free tier.
 
-Some useful resources:
-**Ruby Object Mapper**
-- [ROM](https://rom-rb.org/)
+For the local version, clone this repository to your local machine:
+`git clone https://github.com/pablisch/chitter-challenge.git`
 
-**ActiveRecord**
-- [ActiveRecord ORM](https://guides.rubyonrails.org/active_record_basics.html)
-- [Sinatra & ActiveRecord setup](https://learn.co/lessons/sinatra-activerecord-setup)
+Switch to the `local-server` branch:
+`git switch local-server`
 
-Notes on functionality:
-------
+cd to the project and install dependencies:
+`bundle install`
 
-* You don't have to be logged in to see the peeps.
-* Makers sign up to chitter with their email, password, name and a username (e.g. [email protected], password123, Sam Morgan, sjmog).
-* The username and email are unique.
-* Peeps (posts to chitter) have the name of the maker and their user handle.
-* Your README should indicate the technologies used, and give instructions on how to install and run the tests.
+Ensure that your postgres server is accessable at the IP address 127.0.0.1.
+Create the postgreSQL databases for running and testing the project:
+```bash
+createdb chitter
+createdb chitter_test
+```
+Create the tables in the databases:
+```bash 
+psql -h 127.0.0.1 chitter < spec/tables.sql
+psql -h 127.0.0.1 chitter_test < spec/tables.sql
+```
+Populate the test database with seed data:
+```bash
+psql -h 127.0.0.1 chitter < spec/seeds.sql
+psql -h 127.0.0.1 chitter_test < spec/seeds.sql
+```
+Start the development server:
+
+`rackup`
+
+Access the website in your browser at [localhost:9292](http://localhost:9292/).
+
+## Using the application
+[Top](#chitter-challenge-by-pablo-joyce) | [Getting Started](#getting-started) | [Tests](#running-the-tests) | [Design](#design) | [Screenshots](#screenshots) | [Tech](#technologies-used) | [Coverage](#notes-on-test-coverage)
+
+Be default uses can see all messages posted by all users, but cannot post messages.
+
+Follow the link to register as a user, you will then be prompted to redirect to login.
 
-Bonus:
------
+After login, you will be redirected to the home page where you can post a new message. messages posted by all users will appear here in reverse chronological order.
 
-If you have time you can implement the following:
+## Running the tests
 
-* In order to start a conversation as a maker I want to reply to a peep from another maker.
+`rspec`
 
-And/Or:
+All tests should pass with a total code coverage of **99.41%**. 
 
-* Work on the CSS to make it look good.
+Screenshots of the tests and coverage can be found in the [Coverage](#notes-on-test-coverage) section of this readme.
 
-Good luck and let the chitter begin!
+## Design
+[Top](#chitter-challenge-by-pablo-joyce) | [Getting Started](#getting-started) | [Use](#using-the-application) | [Tests](#running-the-tests) | [Screenshots](#screenshots) | [Tech](#technologies-used) | [Coverage](#notes-on-test-coverage)
 
-Code Review
------------
+The design planning used at the time of making can be seen in recipes/chitter_plan.md.
 
-In code review we'll be hoping to see:
+I started by creating a [diagram of the user experience]([.images/chitter3.png](https://github.com/pablisch/chitter-challenge/blob/main/images/chitter3.png?raw=true)) and incorporated the routes and validations into this diagram:
 
-* All tests passing
-* High [Test coverage](https://github.com/makersacademy/course/blob/main/pills/test_coverage.md) (>95% is good)
-* The code is elegant: every class has a clear responsibility, methods are short etc.
+![chitter user experience diagram](./images/chitter3.png)
 
-Reviewers will potentially be using this [code review rubric](docs/review.md).  Referring to this rubric in advance may make the challenge somewhat easier.  You should be the judge of how much challenge you want at this moment.
+The design itself changed a lot during the design process as the diagramming revealed issues and solved many problems before I started coding.
+This gave me a good roadmap from which to build the app.
 
-Notes on test coverage
-----------------------
+* The application is built with the Sinatra web framework, rendering view files using ERB
+* Each database table has a corresponding Ruby class defined with a singular version of the name of the table.
+* Each table has an additional 'TABLENAME_repository' class with methods that allow for CRUD operations on the DB.
+* The database connection is established in `lib/database_connection.rb` using the `pg` gem
+* The database tables have a one-to-many relationship with the users table. This is implemented by storing the user_id in the peeps table.
+* Route handling occurs in the `Application` class defined in [./app.rb](./app.rb). [./config.ru](./config.ru) executes the code inside of `Application` when `rackup` is run at the command line.
+* Passwords are hashed using the [BCrypt](https://rubygems.org/gems/bcrypt/versions/3.1.12) gem.
 
-Please ensure you have the following **AT THE TOP** of your spec_helper.rb in order to have test coverage stats generated
-on your pull request:
+## Screenshots
+[Top](#chitter-challenge-by-pablo-joyce) | [Getting Started](#getting-started) | [Use](#using-the-application) | [Tests](#running-the-tests) | [Design](#design) | [Tech](#technologies-used) | [Coverage](#notes-on-test-coverage)
+
+Register a new user:
+
+<img src="images/register.png" alt="Register a new user" style="width:600px">
+
+Main screen when logged in:
+
+<img src="images/logged-in.png" alt="Main screen when logged in" style="width:600px">
+
+Create a new peep:
+
+<img src="images/create.png" alt="Create a new peep" style="width:600px">
+
+Display new peep:
+
+<img src="images/new.png" alt="Display new peep" style="width:600px">
+
+## Technologies used
+[Top](#chitter-challenge-by-pablo-joyce) | [Getting Started](#getting-started) | [Use](#using-the-application) | [Tests](#running-the-tests) | [Design](#design) | [Screenshots](#screenshots) | [Coverage](#notes-on-test-coverage)
+
+This project uses:
+* Ruby
+* PostgreSQL
+* ERB
+* Rackup
+* Sinatra
+* Webrick
+* Git
+* GitHub
+* Bcrypt
+
+In development, this project also used:
+* Postman
+* TablePlus
+* RSpec
+
+## Notes on test coverage
+[Top](#chitter-challenge-by-pablo-joyce) | [Getting Started](#getting-started) | [Use](#using-the-application) | [Tests](#running-the-tests) | [Design](#design) | [Screenshots](#screenshots) | [Tech](#technologies-used)
+
+The following code **at the top** of spec_helper.rb causes test coverage stats to be generated
+on pull request:
 
 ```ruby
 require 'simplecov'
@@ -120,4 +194,10 @@ SimpleCov.formatter = SimpleCov::Formatter::MultiFormatter.new([
 SimpleCov.start
 ```
 
-You can see your test coverage when you run your tests. If you want this in a graphical form, uncomment the `HTMLFormatter` line and see what happens!
+Coverage: 
+
+<img src="images/coverage.png" alt="Test coverage" style="width:600px">
+
+Test results:
+
+<img src="images/tests.png" alt="Test results" style="width:500px">