| Bootstrap | Node.js | Express.js |
|---|---|---|
| Mongoose | MongoDB | Custom CSS |
| GSAP | jQuery | Heroku |
The site is a heavily expanded and customised version of a coursework project. It uses RESTful routing on a Node.js server on Heroku to render a Bootstrap 4 based web app, styled using CSS, JavaScript libraries such as jQuery and GSAP, and API calls for image sourcing.
This is an ongoing project, and as such features will change and improve over time.
Version logs for the entire project are below...
- Add landing page
- Add listings page to list all entries
- Each listing has:
- Name
- Image
- Create header & footer partials
- Add in Bootstrap
- Setup new listing POST route
- Add in body-parser
- Setup route to show form
- Add basic form
- Add better header
- Make listings display in grid
- Add navbar to header
- Style new listing form
- Install & config mongoose
- Setup entry model
- Use entry model inside routes
- Add description to object model
- Add shoe route/template
- Create models directory
- Add seeds.js
- Run on server start
- Create model
- Display on show page
- Add new and create routes
- Add new comment form
- Add sidebar to show
- Display comments
- Bulk out seeds
- Create CSS & link up
- Install auth packages
- Define user model
- Config Passport
- Add register routes
- Add register template
- Add login routes
- Add login template
- Add logout route
- Prevent comments if not signed in
- Show/hide auth links
- Add navbar links
- Show/hide as appropriate
- Use Express router to refactor all routes
- Associate users with comments
- Save author's name to comments
- Prevent unauth users from creating listings
- Save user to new listings
- Add Method-Override
- Add Edit riute
- Link to edut page
- Add update route
- Add destroy route
- Add link to show page
- Restrict users to u/d own listings
- Hide/show routs as appropriate
- Add edit route & button
- Add update route
- Add destroy route & button
- Auth edit/destroy routes
- Hide/show routes
- Refactor middleware
- Install & config flash
- Add alerts to header
- Add css sheet
- Add html
- Add price to listing model
- Add to routes
- Add to model
- Add to register
- Show on header
- Incorporate into routes
- Add styles to footer
- Add JS, jQuery links to footer
- Add collapse to navbar
- Add background to jumbotron & change border radius (inc. media breakpoints)
- Style buttons
- Make images links & use hover transitions
- Add GSAP
- Animate background images
- Set up show route via listing show page
- Add to listing model
- Add page
- Set route
- Add page
- Add to model
- Change colours - brand, active, buttons, body
- Change fonts - display, body
- Tweak layout in response to font changes
- Add JS to determine body size after image load, make footer sticky if needed
- Minor cosmetic tweaks
- Add route & update links
- Add page template
- Expand template
- Link with admin users
- Write Proper About Section
- Integrate 1-5 rating in comment model
- Handle this in comment routes
- Add check comment existence check to middleware route
- Add check comment existence check to comment route
- Add average rating function to middleware
- Add to listing model with average rating
- Handle in listing show page
- Add field to new comment / edit form
- Add ratings to seed comments
- Update average rating in seeds after populating
- Bug fixes on comment population
- Restyle edit listing form & populate correctly
- Restyle edit comment form & populate correctly
- Restyle new listing form
- Restyle new comment form
- Restyle login & signup pages
- Change signup button to match style
- Make consistent headers across pages
- Pull footer to page bottom if no images on page
- Add active class to nav link if relevant
- Expand image in listing model to be object with src and alt
- Change edit route to handle this (worth researching how to pass objects-in-objects later...)
- Put alt attr on all views which handle images
- Update seeds to reflect changes
- Add src field to new & edit listing forms
- Add search bar to index page
- Add regex for form validation in middleware
- Pass search term to listings index render
- Display search term in jumbotron
- Pass error if no results
- Only display search term if results show
- Change to Masonry-style layout
- Remove card borders
- Tweak jumbotron spacing
- Update Bootstrap
- Add stretched-link to cards & remove link around image
- Modify CSS selector for image styling to cover focus change
- Add JS to make navbar sticky if page is bigger than viewport
- Combine detail/gallery/features on one page
- make one central column
- Gallery as main image
- Convert to grid system from card
- Large header
- fix carousel image sizing
- Navigation within page
- Add CDN to footer
- Add index page animation from codepen file
- Add listing page animation from codepen file
- Change classes & IDs in show page to improve semantics
- Refactor timeline building & intersection observer to functions
- Nest in conditionals for relevant pages
- Refactor header on index & show pages to share styles & layout
- Put listing search in seperate row
- Show search term in search bar on results page
- Show search term in index header
- Add Blotter CDN to landing page
- Add span for Blotter to HTML
- Add class to old header so screen readable
- Adjust values & style Blotter instance
- Change all handling of 'comment' to 'review' to clear up semantics
- Define blog model
- Set up index route
- Index page skeleton
- Set up new route
- New page skeleton
- Set up post route
- Change index page to display posts
- Concat post text for preview to first sentence
- Create show route
- Create show page
- Render blog posts with HTML
- Better display for date posted
- Include author
- Add to navbar
- Add EJS logic to conditionally render h1 if Blotter fails
- Add shadow to navbar
- Remove Blotter following review
- Restyle text for spacing & readability
- Change GSAP tweens
- Conditionally add animation based on prefers-reduced-motion
- Responsive styling
- Change tweens to follow mouse movement
- Add required, default to Mongoose schemas
- Add userImageUrl to schema with fallback
- Add to route, form
- add app.use(static) to public/images
- change refs to static images in app
- Responsive image scaling in carousel
- Border on index-cards
- Footer restyle
- Add margin-top to alert messages
- Add root vars for custom colors
- Signup form labels as inline input groups
- Clean up main.css
- Rounded containers
- Rearrange reviews as col system
- Add fallback for user image
- Change detail/features to split column
- Match nav-pills to container width
- Change header sizings
- Add sr-only review ratings
- Clean up EJS
- Change to
<div> - Add background color
- Change font color
- Add smaller version
- Reflect reformatting in pages with headers
- Pass on container styling
- Better styling for show
- field & about sections for agents
- display in about us section
- add to CRUD routes
- put gallery in new/edit forms
- update routes to pass this info
- fixed array of features as checkboxes
- update routes to pass this info
- Listing Name
- Listing Description
- Listing Images
- Agent Image
- Agent Description
- Agent Field
- User Image
- User Comment
- login as dropdown from navbar