Skip to content

A basic React site for new coders to contribute towards during Hacktoberfest. Add things, improve things, try things out.

Notifications You must be signed in to change notification settings

Ian-Yy/BuildTravelCards

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Hacktoberfest 2019

Looking for a little more than just adding your name to the ReadMe? Contribute a little or a lot, depending on your skill level and challenge you're seeking, to crowd-build the front-end of a basic trips and travel site. Add useful features and components, improve the styling, practise your React and maybe test out that library you always wanted to try.

[This is purely a playground for fun and practise. It is not a live project :) ]

Getting started

Fork the repo, npm i, npm start.

It's pretty basic! But that's OK. There's plenty to do. Feel free to simply PR the things you'd like to do, or create an issue first.

Add a new trip

Go to '''response.js''', a fake data object, and add a trip of your choice. Follow the format given and don't change any of the key names. Consider adding an image, too - 640x420px, if you don't want to worry about resizing it.

Fix the CSS

It's pretty scrappy, so feel free to clean up some elements as you see fit.

Install ESLint and Prettier

Set some standards! Can we get them running on save?

Create the Nav area

Dropdowns? Expose new menu bars? Play with animation and bring the navigation to life.

Dates

The dates are strings, which isn't optimal. Use Javascript's Date methods to set them as strings in the response, then parse neatly on the front-end.

Sorts and filters

Why not give the user the ability to show only a certain category, or sort by some criteria?

Footer

Sticky, floating, only appears on hover? It's up to you.

CSS Grid

Flex is great but may not be robust enough for this layout; Grid would work well here.

CSS Solution

I'm a fan of Styled Components, but anything goes. A more organised and re-usable system would be beneficial.

Testing

Keen to test out a new testing library? With some functionality in place, this could be a good playground.

Single page view

Click a card and view the trip alone, with further information.

This project was bootstrapped with Create React App.

About

A basic React site for new coders to contribute towards during Hacktoberfest. Add things, improve things, try things out.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 58.4%
  • HTML 23.0%
  • CSS 18.6%