OneForAll.42

About

...

Take a look at our pitch!

• Via Google Slides
• Download PDF

Why?

...

How?

...

Setup

Clone the repository

git clone https://github.com/jraleman/OneForAll.42 OneForAll.42/
cd OneForAll.42/

Install dependencies

npm install

or

yarn install

Then, start the node server

npm start

Use & to put it in the background

npm start &

And run the electron instance

npm run electron

Project Structure

The idea of having a good project structure is to have a cross platform project, to maximize code reuse, keep the configurations out of the code, and minimize the component state.

This is the main idea:

src/
├── actions/
│   ├── constants.js
│   └── index.js
├── App.js
├── components/
│   ├── AppHeader/
│   │   ├── AppHeader.js
│   │   ├── index.js
│   │   └── styles.js
│   └── TabNavbar/
│       ├── index.js
│       ├── styles.js
│       └── TabNavbar.js
├── config/
│   ├── AppConfig.js
│   └── index.js
├── containers/
│   ├── LanguagesContainer/
│   │   ├── index.js
│   │   ├── LanguagesContainer.js
│   │   └── styles.js
│   ├── RootContainer/
│   │   ├── index.js
│   │   └── RootContainer.js
│   ├── ServicesContainer/
│   │   ├── index.js
│   │   ├── ServicesContainer.js
│   │   └── styles.js
│   └── ThemesContainer/
│       ├── index.js
│       ├── styles.js
│       └── ThemesContainer.js
├── electron/
│   ├── icon.png
│   ├── renderer.js
│   ├── starter.js
│   ├── tray.js
│   └── window.js
├── fixtures/
│   ├── 42API/
│   │   └── json/
│   │       ├── userData1.json
│   │       ├── userData2.json
│   │       ├── userData3.json
│   │       └── userList.json
│   ├── index.js
│   └── OneForAll/
│       └── json/
│           └── appData.json
├── i18n/
│   ├── index.js
│   └── languages/
│       ├── de.json
│       ├── en.json
│       ├── es.json
│       ├── fr.json
│       ├── pt.json
│       └── ru.json
├── index.js
├── navigation/
│   └── ServiceNavigation/
│       ├── index.js
│       └── ServiceNavigation.js
├── reducers/
│   └── index.js
├── registerServiceWorker.js
├── screens/
│   ├── HomeScreen/
│   │   ├── HomeScreen.js
│   │   ├── index.js
│   │   └── styles.js
│   ├── LoginScreen/
│   │   ├── index.js
│   │   ├── LoginScreen.js
│   │   └── styles.js
│   ├── OnboardingScreen/
│   │   ├── index.js
│   │   ├── OnboardingScreen.js
│   │   └── styles.js
│   └── ServiceScreen/
│       ├── index.js
│       ├── ServiceScreeen.js
│       └── styles.js
├── themes/
│   ├── colors.js
│   ├── images/
│   │   └── logo.svg
│   ├── images.js
│   ├── index.js
│   └── metrics.js
└── transforms/
    ├── getAvgExp.js
    └── getAvgHearts.js

Project Structure Walkthrough

This is just a basic walkthrough to the project structure, walking through the directories in more detail.

...

Work in progress. :)

Style Guide

Code

This project follows the semistandard, which is just the standard style guide, but including semicolons ; at the end of a statement. This is because love the C programming languages, and semicolons are awesome.

Setup

To install it, run:

npm run lint-install

Usage

After running npm install, you can run the following scripts (depending on your platform), to check if the code follows the semistandard coding style guide.

npm run lint

This will print out the errors and/or warnings that your code might have.

Also, you might want to check the following table! ;)

Mac OS X	Linux	Description
npm run lint	npm run lint	Checks src/ code style
npm run lint-log	npm run lint-log-linux	Saves and open the log file

Help

If you have any problem running the lint from the project, try installing the following packages globally, like this:

npm install --save snazzy
npm install --save semistandard

And then just run the lint from your end.

Colors

Primary (Stone Yellow)

Secondary

Dark / Light

Success / Error / Warning / Info

Look & Feel

• Material UI

Font

• Impact
• Roboto

Icons

• Material Design Icons

Contributors

• Jose Ramón Aleman
• Gerardo Malpartida
• Cristian Franco

Goals

• Start
  • Nuke the repo, start from scratch!
  • Rename repo -> OneForAll.42
  • Init create-react-app
  • Set styleguide
  • Config lint script
• Pitch
  • Prototype
  • Scalability
  • What, How, Why?
  • Google Slides
  • Generate static site from README.md markdown
• Design
  • Logo
  • Define color pallet
  • UI / UX ideas
    • Multiple services
  • Attach App's mockups
  • Prototype mockups
  • Make a tray icon
• Electron
  • Integrate electron
    • Install the module as dev (npm install --save-dev electron)
    • Follow Christian Sepulveda's guide
    • Install foreman, allow executing the app from command line
    • Install electron-builder and add build script
    • Follow flaviocopes' guide
  • System tray
  • Configure menu/task manager
  • Handle needed native events
    • Add notifications support
    • Hotkeys support (use tab to navigator)
• ReactJS
  • Integrate material-ui
    • Install the module (npm install @material-ui/core)
  • Setup Project Structure
    • Add empty files
    • tree directory ./src/
    • Add dummy components
    • Add dummy screens
    • Add dummy containers
  • Fixtures
    • Add basic module structure
    • 42API
      • Make a real api call, and copy the data to
        • userData.json
        • userList.json
    • appData.json
      • userData
      • settingsData
  • Components
    • AppHeader
    • TabNavbar
  • Containers
    • RootContainer
    • LanguagesContainer
    • ServicesContainer
    • ThemesContainer
  • Screens
    • Onboarding
    • Login
      • Validate data
      • Use 42 API (fixture for now)
    • Home Screen
      • Add Avatar
      • Basic Info
      • Responsive Banner
      • CV Generator via QR Code and tinyurl thingy
      • Settings
        • Change password
        • Toggle services (all on by default)
        • Language selector
        • Change themes (day-night)
    • Services (not working that great...)
      • Intra
      • Slack
      • Campus
      • Cantina
      • E-commerce (sub-menu)
        • 42 Shop
        • Crowd-funding
        • Bazaar
      • Dorms
  • Integrate easter eggs via cheat.js
    • Add boku no hero references as easter egg
    • Video games reference too
    • And a bit about HHGttG
  • Integrate i18n
    • Install the module (npm install --save react-i18n)
    • Configure the module
    • Add languages
      • English
      • Spanish
      • German
      • French
      • Russian
      • Portuguese
  • Integrate redux
    • Install the module (npm install --save redux)
    • Setup the redux store
    • Use redux-thunk (npm install --save redux-thunk)
    • Keep stored data via redux-persist (npm install --save redux-persist)
  • Navigation
    • TabNavigator Structure
      • Style
      • Icons
    • Sub-menu modal or something like that
    • Use react-router (npm install --save react-router)
  • Firebase
    • Validate login
• Housekeeping
  • Refactor code
  • Apply code styleguide (lint)
  • Remove unnecessary modules
  • Keep up to date!

Sources

• electron-quick-start
• Christian Sepulveda's - How to build an Electron app using create-react-app
• Flaviocopes - react-electron)
• Emir Bakhtarov's - Handling of iframes in React
• Universal Native Boilerplate

License

This project is under the MIT License. Meaning that you can use, copy, modify, merge, publish, distribute, sub-license, and/or sell copies of the final products, under some conditions. See the LICENSE file for more details.