FreelancerBnB
FreelancerBnB Job-Board Project
Directory Structure
├── config
│ ├── alias.js
│ ├── env.js
│ ├── jest
│ │ ├── cssTransform.js
│ │ ├── fileTransform.js
│ │ └── setupTests.js
│ ├── paths.js
│ ├── polyfills.js
│ ├── webpack.config.dev.js
│ ├── webpack.config.prod.js
│ └── webpackDevServer.config.js
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── README.md
├── scripts
│ ├── build.js
│ ├── dev.js
│ └── test.js
└── src
├── assets
│ ├── images
│ └── scss
├── components
│ ├── Footer
│ ├── Layout
│ │ ├── index.js
│ │ └── tests
│ │ └── index.test.js
│ └── NavBar
├── containers
│ ├── App
│ │ ├── index.js
│ │ ├── index.scss
│ │ └── tests
│ │ └── index.test.js
│ └── HomePage
│ ├── index.js
│ └── tests
│ └── index.test.js
├── index.js
└── registerServiceWorker.js
Getting Started
Just clone the repo and start hacking:
git clone https://o2oprotocol@bitbucket.org/BnB-Team/FreelancerBnB.git FreelancerBnBcd FreelancerBnB# npm install --save autoprefixer babel-core babel-eslint babel-jest babel-loader babel-preset-react-app babel-runtime case-sensitive-paths-webpack-plugin chalk css-loader dotenv dotenv-expand enzyme enzyme-adapter-react-16 eslint eslint-config-react-app eslint-loader eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react extract-text-webpack-plugin file-loader fs-extra html-webpack-plugin jest node-sass object-assign postcss-flexbugs-fixes postcss-loader promise raf react react-bootstrap react-dev-utils react-dom react-router-dom react-test-renderer resolve sass-loader style-loader sw-precache-webpack-plugin url-loader webpack webpack-dev-server webpack-manifest-plugin whatwg-fetch # brew install yarn yarn # npm install yarn dev # npm run dev Then open http://localhost:3000/ to see your app.
Features
| Features | Status |
|---|---|
| Clean Structure | [x] |
| React, JSX, ES6, and Flow syntax support. | [x] |
| An offline-first service worker | [x] |
| Unit Test with Jest | [x] |
| Webpack | [x] |
| React Bootstrap 3.7 | [x] |
| Sass | [x] |
| Redux | [ ] |
User guide
Production
yarn build # npm run build Upload all files in ./build directory to your hosting/server and enjoy.
TODO
- prototype/index5.html
- Scroll navigation: similar to prototype/index.html
- Loading
- Box-Corner
- Gray --> lighter gray / transparent
- Using SCSS from prototype/index.html
- Navigation, Search Area, Popular Categories, Recent Jobs, Featured Job: Hover, ...
Color:
linear-gradient(45deg, rgba(139,145,221,1) 0%,rgba(16,25,93,1) 71%,rgba(16,25,93,1) 100%) linear-gradient(#507eb1,#709dc7 10%,#dde9f5 38%,#eaf2f9 48%,#f6f9fc 62%) linear-gradient(315deg,#29b2fe,#0069C7) linear-gradient(45deg,#29b2fe,#0069C7)
linear-gradient(45deg,#29b2fe 0%,#0069C7 71%)