Feedback

Gemfile

@@ -16,6 +16,8 @@ gem 'webpacker', '~> 4.0'
 # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
 gem 'turbolinks', '~> 5'
 # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
+gem 'devise'
+gem 'dotenv-rails'
 gem 'jbuilder', '~> 2.7'
 # Use Redis adapter to run Action Cable in production
 # gem 'redis', '~> 4.0'

Gemfile.lock

@@ -57,13 +57,24 @@ GEM
       tzinfo (~> 1.1)
       zeitwerk (~> 2.2, >= 2.2.2)
     ast (2.4.2)
+    bcrypt (3.1.16)
     bindex (0.8.1)
-    bootsnap (1.8.0)
+    bootsnap (1.8.1)
       msgpack (~> 1.0)
     builder (3.2.4)
     byebug (11.1.3)
     concurrent-ruby (1.1.9)
     crass (1.0.6)
+    devise (4.8.0)
+      bcrypt (~> 3.0)
+      orm_adapter (~> 0.1)
+      railties (>= 4.1.0)
+      responders
+      warden (~> 1.2.3)
+    dotenv (2.7.6)
+    dotenv-rails (2.7.6)
+      dotenv (= 2.7.6)
+      railties (>= 3.2)
     erubi (1.10.0)
     ffi (1.15.3)
     globalid (0.5.2)
@@ -90,6 +101,7 @@ GEM
     nokogiri (1.12.3)
       mini_portile2 (~> 2.6.1)
       racc (~> 1.4)
+    orm_adapter (0.5.0)
     parallel (1.20.1)
     parser (3.0.2.0)
       ast (~> 2.4.1)
@@ -134,6 +146,9 @@ GEM
     rb-inotify (0.10.1)
       ffi (~> 1.0)
     regexp_parser (2.1.1)
+    responders (3.0.1)
+      actionpack (>= 5.0)
+      railties (>= 5.0)
     rexml (3.2.5)
     rubocop (1.20.0)
       parallel (~> 1.10)
@@ -181,6 +196,8 @@ GEM
     tzinfo (1.2.9)
       thread_safe (~> 0.1)
     unicode-display_width (2.0.0)
+    warden (1.2.9)
+      rack (>= 2.0.9)
     web-console (4.1.0)
       actionview (>= 6.0.0)
       activemodel (>= 6.0.0)
@@ -201,6 +218,8 @@ PLATFORMS
 DEPENDENCIES
   bootsnap (>= 1.4.2)
   byebug
+  devise
+  dotenv-rails
   jbuilder (~> 2.7)
   listen (~> 3.2)
   pg (>= 0.18, < 2.0)

README.md

@@ -1,24 +1,58 @@
 # README
 
-This README would normally document whatever steps are necessary to get the
-application up and running.
+This repo contains an MVP about a simpler and modified version of Twitter in Ruby on Rails.
 
-Things you may want to cover:
+## Before getting started
 
-* Ruby version
+1. Clone this repo and get into it.
 
-* System dependencies
+2. Rename `.env.sample` to `.env` and fill it up with your github credentials. (DB_HOST will be filled later)
 
-* Configuration
+3. Run `docker compose up`. This will give you your db_host container name(tweetable-individual_xxxx_db_1)
 
-* Database creation
+4. On a different window run `docker compose exec client bash`.
 
-* Database initialization
+5. Inside the bash terminal run the `bootstrap` command.
 
-* How to run the test suite
+6. Set up your `config/database.yml` file following the rules at [the instructions](https://github.com/codeableorg/tweetable-individual/blob/main/instructions.md#the-database).
 
-* Services (job queues, cache servers, search engines, etc.)
+7. Install all the gems with `bundle install`, if it says something like _your bundle is locked..._ run `bundle update`.
 
-* Deployment instructions
+7.a if an _error Couldn't find an integrity file_ appears, run `yarn install --check-files`.
 
-* ...
+8. Initialize your DB: `rails db:create`
+
+## About
+
+### The app
+
+You can access your running app looking at `localhost:3000`.
+
+> To be able to see your app running on any browser, run it using `rails server -b 0.0.0.0`.
+> Otherwise the server will start but you won't be able to see anything since the rails app is just showing for its local container.
+
+### The database
+
+The file `config/database.yml` should be configured like the next example.
+
+```ruby
+default: &default
+  adapter: postgresql
+  encoding: unicode
+  host: db
+  username: postgres
+  password: <%= ENV['PGPASSWORD'] %>
+  # For details on connection pooling, see Rails configuration guide
+  # https://guides.rubyonrails.org/configuring.html#database-pooling
+  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
+```
+
+If you want to connect to your db from a GUI client, you can use the next credentials:
+
+```
+  username: postgres
+  password: codeable
+  host: localhost
+  port: 54320
+  database: <rails_db_dev_name>
+```

app/assets/stylesheets/application.css

@@ -13,3 +13,21 @@
  *= require_tree .
  *= require_self
  */
+ @import "./global.css";
+ @import "./components/button.css";
+ @import "./components/cta.css";
+ @import "./components/icon.css";
+ @import "./components/navbar.css";
+ @import "./components/input.css";
+ @import "./components/forms.css";
+ @import "./components/flash.css";
+
+
+ body {
+   background-color: var(--gray-100);
+ }
+
+ form {
+   width: 80%;
+   margin-left: 10%;
+ }

app/assets/stylesheets/base/colors.css

@@ -0,0 +1,27 @@
+:root {
+  --secondary-100: #a8a8a8;
+  --secondary-200: #8f8f8f;
+  --secondary-300: #757575;
+  --secondary-400: #5c5c5c;
+  --secondary-500: #424242;
+  --secondary-600: #292929;
+  --white: #ffffff;
+  --gray-100: #f2f2f2;
+  --gray-200: #d3d3d3;
+  --gray-300: #99a3ac;
+  --gray-400: #303036;
+  --gray-500: #17171c;
+  --cyan: #1DA1F2;
+
+  --shadow-xs: 0px 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-s: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
+  --shadow-base: 0px 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0px 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-l: 0px 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0px 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0px 20px 25px -5px rgba(0, 0, 0, 0.1),
+    0px 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --shadow-input--primary: 0px 0px 4px var(--primary-300);
+  --shadow-input-error: 0px 0px 4px var(--error-500);
+  --shadow-button--primary: 0 0 0 2px white, 0 0 0 4px var(--primary-300);
+}

app/assets/stylesheets/base/layouts.css

@@ -0,0 +1,83 @@
+.section {
+  width: 600px;
+}
+.section--sm {
+  padding: 64px 0px;
+}
+.section--xs {
+  padding: 16px 0px;
+  height: 64px;
+  width: 100%;
+  text-align: center;
+  font-size: 20px;
+}
+.container {
+  margin: auto;
+  padding: 16px;
+  max-width: 700px;
+  top: 48px;
+  background-color: var(--white);
+  padding: 16px;
+  margin-top: 20px;
+}
+
+.m-auto {
+  margin: auto;
+}
+
+.gap-32 {
+  gap: 32px;
+}
+
+.flex {
+  display: flex;
+  margin-left: 16px;
+  margin-right: 16px;
+}
+
+.flex-col {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.space-between {
+  justify-content: space-between;
+}
+
+.gap-16 {
+  gap: 16px;
+}
+
+.gap-12 {
+  gap: 12px;
+}
+
+.gap-6 {
+  gap: 6px;
+}
+
+.align-center {
+  text-align: center;
+}
+
+/* @media (max-width: 1024px) {
+  .md\:grid--1col {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 480px) {
+  .section {
+    padding: 48px 0px;
+  }
+
+  .container {
+    padding: 0px 16px;
+  }
+
+  .grid--2col,
+  .grid--3col {
+    grid-template-columns: 1fr;
+  }
+} */