boyutluseyler

Yet another 3D model repository

"boyutlu şeyler" with English translation "dimensional things" is a 3D model repository web application powered by Ruby on Rails and Vue.js that provides the basic functions you'd expect from a repository, such as add, filter, list, preview, download, like, etc.

Its goals are: Having an easy to use and simple user interface, ensuring active participation of users, and providing a codebase for users to contribute to the app. The project is still in its infancy but the codebase can be a reference for your web development journey.

Main page	Design page

Table of Contents

• Roadmap
• Background
  • Tech Stack
  • Convention
  • Domain Model
  • Documentation
  • Code Coverage
• Install (Ubuntu)
  • Prerequisites
  • Installation
• Usage
  • Running Tests
• Changelog
• Contributing
• License

Roadmap

https://trello.com/b/Tho9MopF/boyutluseyler

Background

boyutluseyler started as a pet project where I can experience the theoretical knowledge I gained in the Ruby / Rails ecosystem. I made sure that all the libraries I used in the project has a new, frequently updated, and clean codebase. I tried to update the libraries periodically, within this period, I carefully read the changelogs.

The application has monolithic architecture. It communicates with event-driven microservices on AWS Lambda for efficient use of resources. As the codebase grows, I am constantly learning more about the system and the business domain. By using the modular monolithic architecture, I aim to set the boundaries between different domains tightly and to prevent possible dependencies.

The business logic of the app heavily depends on the service objects. Some services act like an orchestra conductor and manage other services and background jobs.

I took advantage of the component-based approach of Vue.js to create rich user interfaces. In order to achieve having only one data flow and only one data entry in components, I used Vuex.

Tech Stack

Show Tech Stack

• Programming Language: Ruby 2.5.5
• Web Application Framework: Ruby on Rails 5.2.3
• Template Engine: Haml
• Reverse Proxy Server: Nginx
• WebSocket: Rails Action Cable 5.2.3
• Web Server: Puma 4.3.3
• In-Memory Database, Cache Store: Amazon ElastiCache for Redis 5.0.5
• Database: Amazon RDS for PostgreSQL 9.6
• Object Storage: Amazon S3
• JS Framework: Vue.js 2.6.10
• CSS Framework: Bootstrap 4.3.1
• Platform as a Service: AWS Elastic Beanstalk (Using as a staging environment)
• Microservices: AWS Lambda, Serverless Framework
  • Image resizer: https://github.com/rokumatsumoto/aws-node-dynamic-image-resizer
  • Initials avatar generator: https://github.com/rokumatsumoto/serverless-initials-avatar
  • Compress files and archive in AWS S3: https://github.com/rokumatsumoto/aws-node-s3-zipper
• Version Control System: Git
• Code Collaboration & Version Control: GitHub
• Continuous Integration: Travis CI
• Automated Code Review and Quality Analytics: Code Climate
• Debugger: Pry, Byebug
• Static Code Analyzer
  • RuboCop 0.77.0, Brakeman 4.4.0, Reek 6.0 for Ruby
  • ESLint Airbnb config for Javascript
• BDD, Testing Framework: RSpec 3.8.0, Capybara 3.29
• Background Processing: Sidekiq 5.2.7
• User Management and Authentication: Devise 4.7.1
• Authorization: Pundit 2.1
• State Machine: FiniteMachine 0.12.1
• Feature Toggle, A/B Testing: Sail 3.3.0
• Flowcharts: Whimsical Flowchart
• Kanban board: Moving from Whimsical Sticky Notes to Trello
• Wireframe: Whimsical Wireframe
• Notifications for Developers: Slack
  • Travis CI build notification
  • Code Climate test coverage notification
• Performance Monitoring (Planned): Skylight
• Search as a Service (Planned): Algolia
• Security (Planned): GuardRails
• Content Delivery Network (Planned): Amazon CloudFront

Convention

I tried to stick to some guides I found during the development process.

• The Ruby Style Guide
• The Rails Style Guide
• The RSpec Style Guide
• Catch unsafe migrations in development for PostgreSQL, MySQL, and MariaDB
• Airbnb JavaScript Style Guide
• Vue.js Style Guide
• GitLab Contributor and Development Docs
• Anti-pattern
• Exploring ES6
• Learn ES2015
• You Don't Need jQuery
• High Performance Animations
• 26 Time Saving Tips for Vue

Domain Model

Generated by rails-erd.

Documentation

There is a doc/development folder in the project, which you can see some conventions and usage of libraries. I will try to maintain the documentation here, so it will be a guide for those who want to contribute to the project.

Show AWS Elastic Beanstalk environment

Show microservice template on AWS Lambda

Code Coverage

At this stage, I do not add new features to the application. My priority is to handle existing scenarios in all aspects and complete their tests.

Although I haven't written all the tests yet, I believe the codebase is clean and understandable so it won't be hard to write tests for each scenario.

I opened an issue on GitHub for this. It contains an item titled "Be sure to have a good code coverage".

Click to see the test suite report

Click to see the detailed test suite report

Install (Ubuntu)

Prerequisites

Ruby

1. If you don't already have a Ruby version manager, I highly recommend rbenv.
2. With the Ruby version manager, install the Ruby version specified in the .ruby-version file.

rbenv install $(cat .ruby-version)

Node

11.x or higher: you can install node via nvm. Please refer to their installation guide

nvm install 11.14.0

node -v

Yarn

1.x: please refer to their installation guide.

PostgreSQL

PostgreSQL 9.6 or higher.

sudo apt update && sudo apt install postgresql postgresql-contrib libpq-dev

To test the installation you can run

sudo -u postgres psql

which should open a PostgreSQL prompt. Exit the prompt by running \q then run

sudo -u postgres createuser -s $YOUR_USERNAME

where $YOUR_USERNAME is the username you are currently logged in as.

Redis

Redis 5 or higher.

I recommend following Digital Ocean's extensive How To Install and Secure Redis on Ubuntu 18.04 (available for other Linux distributions as well) to setup Redis.

Installation

1. Clone the repository

   git clone https://github.com/rokumatsumoto/boyutluseyler.git

2. Install Bundler 1.17.3

   gem install bundler -v 1.17.3

3. Install Ruby gems

   bundle install

4. Install Yarn packages

   yarn install

5. Set up your environment variables/secrets

   • Remove config/credentials.yml.enc file. It contains my creds 😃
   • Run EDITOR="code --wait" bin/rails credentials:edit. This command will create a new master.key and credentials.yml.enc if they do not exist.
   • Copy all credentials except secret_key_base from the config/credentials.example.yml file.
   • Paste the example credentials you copied in the new credentials file.
   • See for environment secrets documentation.

6. Setup the database

   bin/rails db:setup

7. (Optional) Create sample data for local development environment

   bundle exec rake dev:prime

Usage

I recommend tmux for accessing multiple terminal sessions simultaneously in a single window.

Start Puma web server

bin/rails server

Start webpack with a development server that provides live reloading.

./bin/webpack-dev-server

Start Sidekiq

bundle exec sidekiq

Watch Rails logs

tail -f log/development.log

Running Tests

Feature specs using Capybara and Headless Chrome. Install ChromeDriver before running tests.

bin/rspec

SIMPLECOV=true CI=true bin/rspec

Changelog

See CHANGELOG

Contributing

The contributing file is currently in the planning phase.

License

See LICENSE