blocklancer.git

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://[e-mail]/BnB-Team/FreelancerBnB.git FreelancerBnB
cd 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%)

#fb236a > #ff7300 = rgb(255, 115, 0); #8b91dd > #29b2fe #141f72 > #0069C7 #24324a > #7d7d7d #1d293e > #5f5f5f #8a99b3 > white #8a99b3 > #29b2fe #6a7d9b > #29b2fe