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

eduqg/BuildTravelCards

 
 

Repository files navigation

Hacktoberfest 2019

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 :)

Please merge any conflicts in your PRs. Keep an eye on them!

Please don't do weird stuff like change all the fonts to Times New Roman or the background to lime-green, it is not 1996.

Do not submit a journey without an image.

Please check the code works before submitting.

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.

Remember to check your PRs and resolve any conflicts! Merging in master should do the trick.

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 60.5%
  • HTML 25.0%
  • CSS 14.5%