🚀 Alpha

Alpha is a web-app development project where you can share pictures, send messages and fetch daily data from NASA APOD API.

This project was built with Ruby on Rails v 7.0.4.2, Turbo v7.2.0 and Stimulus v3.1.0 and was designed to implement CRUD operations on relational models while exploring Hotwire's rendering capabilities.

⚠ EXPERIMENTAL BRANCH ⚠

Changelog

• Upgraded Rails to v7.0.4.2
• Upgraded Ruby version to 3.2.1
• ActionCable switched to Redis
• Database switched to PostgreSQL
• Carrierwave upload switched to AWS S3
• Added client-side and server-side file size validation (2 Megabytes per file maximum)
• Stimulus controllers refactoring
  
  

💻 Jump to Setup

Overview

Alpha is a SPA-(ish) responsive web application. Each section can easily be accessed from the top navbar which also hosts user controls. A global notification component is placed between the navbar and the main content and is responsible for showing flash notifications.

Alpha is designed to take full advantage of Stimulus controllers, so JavaScript is essentially required, but precautions were taken so that the website is fully navigable even without JavaScript.

Landing Page

The landing page is the root_url . Users are taken for a tour on a vertical snap-scrolling page where every section links to the related path.

Main Sections

The website is divided into three main sections: Posts, Messages and NASA. Both Posts and Messages feature an infinite scrolling stream provided by the kaminari gem pagination and an IntersectionObserver created by a dedicated Stimulus controller, which in turn makes turbo-stream requests to the server. A WebSocket is also configured on these public pages, with a Turbo::StreamsChannel automatically managing subscriptions and streams.

Posts

This page shows a live feed of latest pictures posted by registered users. The + button takes users to the new post form, where they can choose to upload a file from their storage or from a remote URL. The carrierwave gem is configured to create a smaller resolution version which is stored on the server along with the original picture. New posts are broadcasted to the /posts path via a Turbo Stream.

Clicking on a post card will trigger the posts#show action which renders a page with a full resolution image and post details. If the post is owned by a logged-in user, buttons to edit and delete will also be available.

Messages

This page shows a live feed of latest messages sent by registered users. The /messages page was designed to take full advantage of Turbo Streams and Turbo Frames. The textarea on top is all it takes to send a message and immediately see it sliding on top of the list. #create, #destroy and #update actions on messages are asynchronously broadcasted to all subscribed users.

Messages sent by a logged-in user will show some controls on the top-right corner. Users can edit inline and delete a message without leaving the /messages path.

NASA

This is were you fetch Nasa's Astronomy Picture of the Day. Hit the Go! button to show today's picture with its title and explanation. Users can then share the picture as a Post by clicking on the Share this picture! button. You don't need to be logged in to fetch data, but a session is obviously needed for sharing.

The API key used to send the request is the DEMO_KEY which is subject to limitations. To avoid putting a heavy and unnecessary load on the API, response properties are saved to local storage and are prioritized over sending a new request. Since the API updates itself at 0:00 UTC, a check for outdated keys is performed and a new request is sent when necessary.

Sometimes, the media type will be "video" instead of "image". In that case, the video will be embedded into an <iframe> and the share button will be unavailable.

User Auth and Validation

Users can register via the rightmost controls on the navbar. User creation validation is handled by validation helpers defined in the model and takes advantage of field_with_error wrappings. Sessions are managed by a Session controller along with a current_user method. The login page is mapped to sessions#new and uses client-side validations while the backend checks for presence.

User Profiles

User profiles are organized by tabs. Each tab contains a consistently styled content list which also features infinite scrolling. If the user viewing the profile is the current_user, a tab to edit user data is shown.

Database

This project uses Rails default Active Record ORM Framework with a PostgreSQL database. Posts and Messages are linked by a belongs_to relationship with Users, which in turn has_many Posts and Messages.

Layout and Style

Alpha's main styling library is Bulma. This library makes an extensive use of flex columns and media queries for mobile (< 768px ), tablet (>= 768px ) and desktop (>= 1024px), resulting in a responsive and elastic layout.

Development Setup

1. Make sure to have Ruby v3.2.1, Rails, PostgreSQL and Redis installed on your machine

2. Make sure to have both PostgreSQL and Redis services up and running

3. You may need to change the REDIS_URL environment variable in config/environments/development.rb

4. Change development variables in config/database.yml according to your PostgreSQL setup

5. Set the following environment variables to access your S3 bucket:

export AWS_ACCESS_KEY_ID="your IAM user access key"
export AWS_SECRET_ACCESS_KEY_ID="your IAM user secret access key"
export AWS_REGION="bucket region like 'eu-north-1'"
export AWS_BUCKET_NAME="your bucket name"

6. Open a shell at the root of this project and run:

$ bundle install
$ ruby bin/rails db:prepare
$ ruby bin/rails server

7. Navigate to http://localhost:3000.

Credits

All vendors are credited in project comments and every non-original content is either licensed or open-source. No copyright infringement is intended.