madClones

A collection of frameworks that I love with a strong focus on clean code, testing, software architecture/design and devops.

503
68
JavaScript

MadClones

Dev | Staging | Master

Build Status
Build Status
Build Status

Join the chat at https://gitter.im/dwyl/chat Twitter URL

Welcome to my mono repo madClones. Started as a small monolith project to build a trello clone, it turned out to be the best project I ever started: it is basically my playground and I have lots of fun with it.

You will not only see a wide variety of front end technologies and a couple of microservices written in different languages and frameworks, but also an emphasis on software design and architecture.

I am a fan of Software Craftsmanship, TDD, BDD and CI practices; therefore this project’s main goal is to follow
all the coding standard and best practices.

Do no hesitate to contribute and/or send me feedback on twitter.

Releases

Version 1.0.0

  • Create a team and add boards in it or directly add them in your personal boards.
  • Star and unstar all your boards.

Version 2.0.0

  • Card view that allows to add cards, card items
  • Move card items between cards.

Version 3.0.0

  • Boards menu. The user clicks on the boards button available in the header and can see all the boards (starred, personal and organisations) previously created.

Version 4.0.0

  • Client: Fix the boards menu filter Fix cards view not rendering correctly when it updates Update board name and star it from the cards view

  • Server: Users microservice that handles authentication (signin: validates user and generate token, signup, signout, signcheck: validates token). Trello microservice that handles boards and cards. Deploy microservices with kubernetes on google cloud. Add continuous integration with travis

Main technologies

  • ReactJs
  • Vue.js
  • Express
  • NodeJS
  • MongoDB
  • Docker
  • Kubernetes

Technologies to be added

  • Electron
  • Rabbimq (not sure yet)
  • Graphql

Support

  • Star the repo
  • Follow me on twitter @datmadmmous
  • Submit pull requests and improve the repo overall quality

Where to get help

ES6: if you want to quickly be up to date with javascript best practices,
AirBNB repo is a gold mine. Read it.

React: AirBnB and
RisingStack

NodeJS: again I will redirect you to RisingStack.
They are awesome and they care about open source.

CodinGame: practicing your algorithm solving skills is a great way to write better code. CodinGame will push you
to another level by making you think about the correct data structure, api and algorithm, to use.

Inspiration

React Trello Board: I used their implementation of React Drag and Drop because it is great

Contribution guidelines

  1. Start with the open issues
  2. No direct commit on master or develop.
  3. Create a branch from develop with issue number as a name. Example: TOC I#1 (TOC = Trello Clone and I = issue)
  4. Code should be accompanied with unit tests with 100% code coverage (whether it is on the client side or the server side).
  5. Make a pull request.
  6. End to end testing are not required for now.

Updates

  • 1.0.0 first release of trello clone
  • 2.0.0 add board view with cards and card items
  • 3.0.0 add boardsmenu

Achievements

  • Release version 1.0.0
  • Release version 2.0.0
  • Release version 3.0.0
  • Deploy react client on amazon web services S3
  • Deploy express server on amazon web services ECS

Areas for Improvements / involvement

  • Add a white background color to each board section (star, user and users)
  • Work on board header in home page : list boards and create features
  • Make UI responsive

Repository structure

The repository is divided into two folders. The Client which contains a react and a vue application and the Server which contains microservices.

I am very happy with the way both applications are structured and working daily to improve on it.