georgeshanti / behemoth

The Excel 2018 Website

Excel 2018 Website

Start dev server

npm start

Production Build

npm run build

Directory Structure

src
├── components  # all partial components
├── pages       # all top level pages (Redux tree will be connected to these)
└── utils       # any utility functions/classes

CSS

• Try not to use scss or sass.

• Create a separate css file for each react component and place them in the same directory. Eg.

  components
  ├── ...
  ├── my-component.js
  └── my-component.css
  

• Try to use locally scoped css for components. Locally scoped css rules won't affect anything other than the markup inside the component.

• To make a css file locally scoped, use the format *.modules.css for the file name. Eg.

  components
  ├── ...
  ├── my-component.js
  └── my-component.module.css # css rules will be locally scoped for my-component.js
  

• Import css directly into your component files and let webpack do the work.

  // my-component.js
  ...
  import styles from './my-component.module.css'
  
  ...
      render(){
        // inside the render method
        return(
          ...
          <div className={styles.someclass}>
             ...
          <div>
          ...
        )
      }

  /* my-component.module.css */
  ...
  .someclass{
    ...
    color: red;
    ...
  }

Routes

• If your route components are top-level pages or contains a lot of code then lazyload them.
• Use the utils/asyncCompoment function to dynamically load the component. Eg.

  import asyncComponent from './utils/asyncComponent'
  // import SomePage from './pages/somepage' // INSTEAD of this
  import Spinner from './components/spinner' // optional loader component that can be used as a placeholder until the main component is loaded
  const SomePageImport = () => import('./pages/somepage') // postpone the import
  const SomePage = asyncComponent(SomePageImport,/*OPTIONAL*/Spinner)
  ...
  ...
    render(){
      // inside our render function
      return (
        ...
        <Route path="somepath" component={SomePage} /> // lazyloaded route
        ...
      );
    }

behemoth's Issues

About Excel Page

• About excel section
• About MEC
• Partners (just logo and their title) or should we create a separate section like this?
• legacy

Events Page

• The images look huge.
• Space on the sides seem underutilized.
• Font need some improvements ( type and size ).
• remove the hover animation.
• Background pattern

Schedule Page

• remove/hide the scroll bars. Try this.
• Background pattern.

Competitions Page

• Background pattern.
• remove/hide the scrollbar. Try this.
• It'd be great if the user can close the cards by clicking outside. ( or fix the close button)
• Event coordinator phone numbers have to be clickable.

Contacts Page

• Fix the font size.
• Make phone number clickable.
• How about we shift the social links to top right?
• Background pattern

Few changes on home page

• What do "find out more about excel" do? (how about a link to the promo video)
• Social media icons look huge. It'd better if each individual icon lights up on hovering. (What about mobile?)
• Blue shade for "Inspire. Innovate. Engineer" doesn't look good and also the icons look out of place.
• The feed items must be a link.
• MEC logo on the left. same level as that of the social icons. (Any suggestions on mobile?)
• Title Sponsor logo should go right above excel logo.
• Schedule not linked to the schedule page
• The color of the countdown makes it look out of place.