meltmedia Challenge!

Vanilla React/Sass - HTML/CSS Wireframe

You can check out the live page HERE!

...or run npm i && npm start 😅

This will be a pithy README covering the basic structure of the app so you know what the heck is going on!

wireframe:

Static page built using vanilla html and css. Both the .html and .css files are broken up into sections using big fancy ASCII art, aligning with the page layout. There's also a small table of contents at the top of the .css page!

I personally used a VSCode extension called "live server" to run the page locally in the browser. It's a handy tool that requires no setup and even has hot reloading 👌

src:

Using React components helped to visualize the different sections of the page (at least from a code perspective), and each section has it's own dedicated file in the src/components/ folder.

src/components:

Nothing really too complex about the page as a whole. Some notable things:

NavBar: added a 'scroll' event listener to the window to create a dynamic style for the nav container
Splash + Careers: did a 'hacky' background trick to mimic color and opacity over the mock background images
About: offloaded long urls to a helper object to clean up the JSX
MapModal: render variable for the modal info to clean up the JSX

src/components/shared:

Some reusable single-tag components for reuse around the page. I created a simple API for their use, particularly with the 'variant' prop to support different stylings if needed.

src/styles:

Again, not much to say here. I used my personally CSS reset (which is fairly light), variables for colors and fonts, and mixins for setting media queries and a dynamic html font-size (very helpful for even more responsiveness!).

Random Stuff:

tsconfig.json:

Basically what's going on here is I'm "aliasing" the src/ folder. First, set the root directory { "baseUrl": "." } followed by creating the alias itself { "paths": "src/*": ["./src/*"] } which will make any import url starting with 'src/' instead of './' will default to the src/ folder, allowing you to import like this:

import { NavBar } from 'src/components';

Barrels...

You may have already noticed that there are actually many [ index.js ] files peppered throughout the app. These are (sometimes) known as "barrel" exports, and have a few advantages when dealing with a larger file-directory. The index file in the components/ folder for example:

export { default as NavBar } from './navBar/navBar'
export { default as Splash } from './splash/splash'
etc...

You can see this in action in /app.js:

import {
  NavBar,
  Splash,
  About,
  Careers,
  MapModal,
  ContactForm,
  Footer,
} from 'src/components';

Note that the import doesn't point to the index file. Node perceives index.js files as points of entry and the default file to grab exports from, essentially making it an implicit file in import statements

musicMan1337/melt-mock

meltmedia Challenge!

Vanilla React/Sass - HTML/CSS Wireframe

You can check out the live page HERE!

wireframe:

src:

src/components:

src/components/shared:

src/styles:

Random Stuff:

tsconfig.json:

Barrels...

Contact

Github - musicMan1337

LinkedIn - Derek-8Bit-Nellis

Facebook - Derek Nellis

Instagram - @derek.8bit.nellis