isalafont / -trello-like Goto Github PK

View Code? Open in Web Editor NEW

2.0 1.0 0.0 471 KB

A Trello Like application made with Rails / VueJS

Home Page: https://magic-freeboard.herokuapp.com/

Ruby 69.42% JavaScript 5.35% SCSS 6.70% HTML 14.24% Vue 4.29%

kaban boards-manager rails ruby vuejs3

-trello-like's Introduction

Trello Like Application

This Trello-Like application is orginaly made for a test technique but it turned out finally into a side-project !

I used the following technologies:

Rails
VueJs
Bootstrap
PostgreSQL
Gem Acts_as_list
Gem Draggable

I've used Rails app generated with lewagon/rails-templates, created by the Le Wagon coding bootcamp team.

README

This is a Todo App musing Vue.js 3 and Rails 6.1.3.2. This is a project to test Vue.Js 3

This README would normally document whatever steps are necessary to get the application up and running.

Things you may want to cover:

System dependencies

Ruby version 2.7.3
Rails Version 6.1.3.2
PostgreSQL 12.10
Yarn Version v1.22.17
Node Module version V16.11.1
Webpacker 5
Vue.js 3
Bootstrap 5

Stack

Local Development

Installation

Prerequisites

If you don't already have them :

Install ruby 2.7.3 rbenv install 2.7.3 && rbenv global 2.7.3
Install bundler 2.2.15 gem install bundler:2.2.15
Install yarn npm i -g yarn

Set up the repo

To install dependencies, run :

bundle install
yarn

To set up database, run:

rails db:setup

When running the db:setup command, the Database test and development will be created. The User email and password to connect to the App will be display in the console and the seeds will be create.

Set environment variables

Running the app locally requires 3 environment variables. To set up your environment variables, run the following command:

cp .env.template .env

Then, edit .env and set the following environment variables:

REDIS_DB: This is Redis_db
REDIS_URL: This is Redis URL
REDIS_PORT: This is Redis Port

For more information, you can read "ruby on rails redis installation and configuration" Or refer to the Redis

Database / Cache

Create a database called Todo_development using your favorite postgresql GUI or CLI.
Then run the migrations : bin/rails db:migrate RAILS_ENV=development

Start the server

To start both the frontend and backend servers at the same time, run:

bin/rails s
bin/webpack-dev-server

In your browser, navigate to localhost:3000 to see the app in action!

This may be helpful for debugging, but generally should not be necessary.

Contributing 🤝

1. Assign yourself an issue from our Issues tab

Check out the good first issue tag if you're just getting started!
If you want to work on something that isn't listed in our Issues, please create a new issue.

2. Write your code and create a pull request

Note that your pull request may require one or more tests. Tests are required for almost all backend changes, and all frontend logic-related changes. Style or copy changes do not require you to write a test.
For a style or copy change, please provide side-by-side screenshots showing how the app looks before and after your changes.

Contributor Resources 📚

Need some help contributing to our app? Check out the resources below for more information about installing and using various third-party tools.

PostgreSQL

Installing PostgreSQL: Mac • Windows • Linux

Ruby

Installing Ruby

Node

GitHub

Reporting Issues 🐞

To report a bug or request a new feature, please open an issue.

-trello-like's People

Contributors

Stargazers

Watchers

-trello-like's Issues

Fix Routes when user is log in

When user is log in, page displaying is not the on for the list but

http://localhost:3000/lists#
the board is not displaying.
Had to change URL with
http://localhost:3000/lists to display the board

Github Continuous integration tools

-Seting up

Run CI tools

Heroku Stack to upgrade

This app is using the Heroku-18 stack, which is supported until April 30th, 2023.
remote: A newer stack is available: Heroku-20. To upgrade, see:
remote: https://devcenter.heroku.com/articles/upgrading-to-the-latest-stack

Card Seeds

Card Seed does not create
Card name : "This is a card"
List seed Change name "To Do"

Heroku Assets size

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
remote: This can impact web performance.
remote: Assets:
remote: js/application-d56e9b03354107f1f677.js (433 KiB)
remote: js/application-d56e9b03354107f1f677.js.map.gz (538 KiB)
remote: js/application-d56e9b03354107f1f677.js.map.br (457 KiB)
remote:
remote: WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
remote: Entrypoints:
remote: application (576 KiB)
remote: css/application-b8d7eab6.css
remote: js/application-d56e9b03354107f1f677.js
remote:
remote:
remote: WARNING in webpack performance recommendations:
remote: You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
remote: For more info visit https://webpack.js.org/guides/code-splitting/
remote: Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--2-1!node_modules/postcss-loader/src/index.js??ref--2-2!node_modules/bootstrap/dist/css/bootstrap.min.css:
remote: Entrypoint mini-css-extract-plugin = *
remote: 2 modules
remote: Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--2-1!node_modules/vue-loader/lib/loaders/stylePostLoader.js!node_modules/postcss-loader/src/index.js??ref--2-2!node_modules/vue-loader/lib/index.js??vue-loader-options!app/javascript/app.vue?vue&type=style&index=0&id=d5c4d6dc&scoped=true&lang=css&:
remote: Entrypoint mini-css-extract-plugin = *
remote: [0] ./node_modules/css-loader/dist/cjs.js??ref--2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--2-2!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=style&index=0&id=d5c4d6dc&scoped=true&lang=css& 3.43 KiB {0} [built]
remote: + 1 hidden module
remote: Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--2-1!node_modules/vue-loader/lib/loaders/stylePostLoader.js!node_modules/postcss-loader/src/index.js??ref--2-2!node_modules/vue-loader/lib/index.js??vue-loader-options!app/javascript/components/list.vue?vue&type=style&index=0&id=82b4258a&scoped=true&lang=css&:
remote: Entrypoint mini-css-extract-plugin = *
remote: 2 modules
remote:
remote: Asset precompilation completed (32.44s)
remote: Cleaning assets
remote: Running: rake assets:clean
remote: I, [2021-12-06T18:24:50.643677 #1492] INFO -- : Removed application-736c667d65e6141a92afccca2406e347f5848769fadde08b8aeab7a3addeb3e9.css
remote: -----> Detecting rails configuration

Controller Profile

We would like to create a Profile page with informations about the User.
We will need the following action:

#show
#new
#create
#edit
#update

Lists should overflow horizontally

List should scroll horizontally and not vertically just like that

For now, we have

Cards Should have Markdown editor

Cards should have a Markdown Editor for styling text

editing Modal list open the card textarea in the same time

When clicking on the list. it open the editing modal and the textarea to create a card in the same time.

Heroku Bug Stack 20 remote test app

According to the tutorial =>
https://devcenter.heroku.com/articles/upgrading-to-the-latest-stack

Will it be a websocket action cable problem ?
Connection is refused.
Landing page is working.

heroku open --remote heroku-20
heroku logs --remote heroku-20

2021-12-06T18:57:22.458623+00:00 heroku[router]: at=info method=GET path="/users/sign_in" host=test-magic-freeboard-heroku-20.herokuapp.com request_id=e8bec193-027e-4795-870b-a5aa6aea8ebf fwd="83.114.35.165" dyno=web.1 connect=0ms service=11ms status=500 bytes=1827 protocol=https
2021-12-06T18:57:26.332859+00:00 heroku[router]: at=info method=GET path="/cable" host=test-magic-freeboard-heroku-20.herokuapp.com request_id=3bba911f-5506-473a-a58e-4ff60f6569b6 fwd="83.114.35.165" dyno=web.1 connect=0ms service=5831ms status=101 bytes=174 protocol=https
2021-12-06T18:57:26.339482+00:00 app[web.1]: I, [2021-12-06T18:57:26.339396 #4] INFO -- : Finished "/cable/" [WebSocket] for 83.114.35.165 at 2021-12-06 18:57:26 +0000
2021-12-06T18:57:26.427983+00:00 app[web.1]: I, [2021-12-06T18:57:26.427907 #4] INFO -- : [466f2cfe-7d59-4253-b141-fb6fefdbfbd9] Started GET "/" for 83.114.35.165 at 2021-12-06 18:57:26 +0000
2021-12-06T18:57:26.429364+00:00 app[web.1]: I, [2021-12-06T18:57:26.429297 #4] INFO -- : [466f2cfe-7d59-4253-b141-fb6fefdbfbd9] Processing by PagesController#home as HTML
2021-12-06T18:57:26.434202+00:00 app[web.1]: I, [2021-12-06T18:57:26.434143 #4] INFO -- : [466f2cfe-7d59-4253-b141-fb6fefdbfbd9] Rendered pages/home.html.erb within layouts/application (Duration: 3.8ms | Allocations: 1021)
2021-12-06T18:57:26.435763+00:00 app[web.1]: I, [2021-12-06T18:57:26.435715 #4] INFO -- : [466f2cfe-7d59-4253-b141-fb6fefdbfbd9] Rendered layout layouts/application.html.erb (Duration: 5.4ms | Allocations: 1591)
2021-12-06T18:57:26.436002+00:00 app[web.1]: I, [2021-12-06T18:57:26.435968 #4] INFO -- : [466f2cfe-7d59-4253-b141-fb6fefdbfbd9] Completed 200 OK in 7ms (Views: 5.9ms | ActiveRecord: 0.0ms | Allocations: 2025)
2021-12-06T18:57:26.439328+00:00 heroku[router]: at=info method=GET path="/" host=test-magic-freeboard-heroku-20.herokuapp.com request_id=466f2cfe-7d59-4253-b141-fb6fefdbfbd9 fwd="83.114.35.165" dyno=web.1 connect=0ms service=11ms status=200 bytes=13042 protocol=https
2021-12-06T18:57:26.858021+00:00 app[web.1]: I, [2021-12-06T18:57:26.857952 #4] INFO -- : [63911e7d-cd9e-4ee0-aff5-c8b76526a83d] Started GET "/cable" for 83.114.35.165 at 2021-12-06 18:57:26 +0000
2021-12-06T18:57:26.859808+00:00 app[web.1]: I, [2021-12-06T18:57:26.859745 #4] INFO -- : [63911e7d-cd9e-4ee0-aff5-c8b76526a83d] Started GET "/cable/" [WebSocket] for 83.114.35.165 at 2021-12-06 18:57:26 +0000
2021-12-06T18:57:26.859946+00:00 app[web.1]: I, [2021-12-06T18:57:26.859902 #4] INFO -- : [63911e7d-cd9e-4ee0-aff5-c8b76526a83d] Successfully upgraded to WebSocket (REQUEST_METHOD: GET, HTTP_CONNECTION: Upgrade, HTTP_UPGRADE: websocket)
2021-12-06T18:57:27.196571+00:00 app[web.1]: E, [2021-12-06T18:57:27.196487 #4] ERROR -- : There was an exception - NameError(undefined local variable or method reject_unauthorized_connetion' for #<ApplicationCable::Connection:0x00005616d7a79330> 2021-12-06T18:57:27.196585+00:00 app[web.1]: Did you mean? reject_unauthorized_connection) 2021-12-06T18:57:27.196642+00:00 app[web.1]: E, [2021-12-06T18:57:27.196611 #4] ERROR -- : /app/app/channels/application_cable/connection.rb:16:in find_verified_user'

Column move Error 404

Column move error 404 Patch.

Install Tailwind

Install Tailwind
Change Bootstrap by Tailwind
Remove Bootstrap

Add a Read Me

Add a Profil Table

Users is only used by Device.
Add a Profil who belongs to Users

A Profil should have the require fields :

First_name
Last_name
Username
Town
Country
Biographie
image_url

Card Text

Text should wrap into body card

label:bug

Heroku Deployement Issues No Procfile detected

WARNING:

remote:
remote: No Procfile detected, using the default web server.
remote: We recommend explicitly declaring how to boot your server process via a Procfile.
remote: https://devcenter.heroku.com/articles/ruby-default-web-server
remote:
remote:
remote: -----> Discovering process types
remote: Procfile declares types -> (none)
remote: Default types for buildpack -> console, rake, web
remote:
remote: -----> Compressing...
remote: Done: 96.5M
remote: -----> Launching...
remote: Released v10
remote: https://magic-freeboard.herokuapp.com/ deployed to Heroku
remote:

No wrapping text inside cards

Text does not wrap inside cards.

Text should wrap
Rework too on padding / marging in the cards.

Create a develop Branch

Add a dev branch to push working feature on
Keep the master to production only !