...
Take a look at our pitch!
...
...
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
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
This is just a basic walkthrough to the project structure, walking through the directories in more detail.
...
Work in progress. :)
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.
To install it, run:
npm run lint-install
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 |
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.
- 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
- Install the module as dev (
- System tray
- Configure menu/task manager
- Handle needed native events
- Add notifications support
- Hotkeys support (use tab to navigator)
- Integrate
- ReactJS
- Integrate
material-ui
- Install the module (
npm install @material-ui/core
)
- Install the module (
- 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
- Make a real api call, and copy the data to
- 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
- Add
- Integrate
i18n
- Install the module (
npm install --save react-i18n
) - Configure the module
- Add languages
- English
- Spanish
- German
- French
- Russian
- Portuguese
- Install the module (
- 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
)
- Install the module (
- Navigation
- TabNavigator Structure
- Style
- Icons
- Sub-menu modal or something like that
- Use
react-router
(npm install --save react-router
)
- TabNavigator Structure
- Firebase
- Validate login
- Integrate
- Housekeeping
- Refactor code
- Apply code styleguide (lint)
- Remove unnecessary modules
- Keep up to date!
- 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
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.