Wedding Website
Prerequisites
- ReactJS
- CSS Grids
- Webpack
- jQuery
- Node / NPM
Getting Started
-
Clone the project
git clone git@github.com:mrishab/wedding-website.git
-
Install the dependencies
cd <path_to_project_root> npm install
-
Start the webpack-dev server
npm run start:dev
Production
To make a production build (minified, uglified and optimized), run
npm run build
To start a local server to test production build, run
npm start
Development
Content
The content is isolated from code by storing all the content in src/info.json file. This file is loaded in the index.js file and the content is delegated from there to individual components.
Structure
-
(Almost) Each JS file has a corresponding CSS file that contains styles/classes only for it's component.
-
Each JS file contains atmost 1 class declaration.
-
The project is structured as follows.
root <all high level configs, README, etc.> src/ *.js assets/ css/ *.css images/ public/ <static resources that need to be distributed with bundle, like index.html>
Note: The npm start
must be followed by npm run build
.
Goals
The application is meant to be used as a static website and therefore, it is optimized for SEO, performance and bandwith. While making modifications to the project, ensure that the following principles are adhered to:
div
tag should be last resort. Aim for the most appropriate HTML semantic markup tag.- An external library must be included only if it is used extensively and the original functionality is hard to code.
- No blocking or long-running synchronous operation is allowed.
- The number of network calls made to fetch resources should be minimal. Therefore, aim for code bundling into a single JS / CSS file.
- The CSS styles should be shared and semantically grouped into a class. This also allows for responsiveness.