The latest articles on DEV Community by Tyler McSilva (@tylerbmcsilva). https://dev.to/tylerbmcsilva https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F125833%2F31b6e406-e56f-479a-9dfd-ac40fa07cfcf.jpeg https://dev.to/tylerbmcsilva en Tyler McSilva Thu, 14 Nov 2019 02:18:24 +0000 https://dev.to/tylerbmcsilva/wanting-to-learn-gastby-turned-into-running-an-impeachment-website-oi0 https://dev.to/tylerbmcsilva/wanting-to-learn-gastby-turned-into-running-an-impeachment-website-oi0 <p><strong>tl;dr</strong> I built <a href="https://www.impeachment.dev/">https://www.impeachment.dev/</a> with Gatsby</p> <h3> 🕰 Background </h3> <p>A few weeks back, I was having a conversation with my mother and was attempting to explain everything that was going on with the current impeachment inquiry happening in the United States. </p> <p>I quickly realized it would be easier if I could send her a timeline of events that lead to this point. After searching Google and couldn't come up with a timeline, I thought about creating my own! I figured that most of the information on the site would be static, and since I wanted to learn more about JAMstack, I went with Gatsby.</p> <h3> 🤯 What I Learned </h3> <ol> <li>Gatsby is AMAZING if you want to quickly build out a website using the templates provided in their documentation. Most of my dev time was spent customizing what I wanted the site to look like, and very little time on configuration.</li> <li>Adding a pipeline from Github → Netlify build was 😘👌*chef's kiss*. Setup took all of 5 minutes and now anytime <code>master</code> is updated, the website is updated within a few minutes allowing me to push out updates fairly quickly!</li> <li>Writing &amp; researching about politics in a non-biased way is fairly difficult, but was a fun challenge for me!</li> </ol> <h3> 🔨 Build Tools </h3> <ul> <li> <a href="https://www.gatsbyjs.org/">Gastby</a> + <a href="https://github.com/gatsbyjs/gatsby-starter-default">Gatsby Starter Kit</a> </li> <li> <a href="https://react.semantic-ui.com">Semantic UI</a> + <a href="https://github.com/veysiyildiz/vertical-timeline-component-for-react">Vertical Timeline Component</a> </li> <li> <a href="https://mochajs.org/">Mocha</a> &amp; <a href="https://airbnb.io/enzyme/">Enzyme</a> </li> <li> <a href="https://circleci.com/">CircleCI</a> (Going to move to Github Actions soon!)</li> <li><a href="https://www.netlify.com/">Netlify</a></li> </ul> <h3> 🤔 What Now? </h3> <ul> <li>Well, currently I'm trying to update it as often as possible, but it's becoming increasingly harder with how fast information is coming out. (contributors welcome 😉)</li> <li>I think optimizing the site would be next. Currently the search function isn't the fastest or most performant, so updating that would be great.</li> <li>Possibly build out individual profiles for the "key people" that would then produce an individual timeline of events for each person.</li> </ul> <p>⬇️ Check out the website ⬇️<br> <a href="https://www.impeachment.dev/">https://www.impeachment.dev/</a></p> <p>⬇️ Want to contribute? (PRs are very welcomed, still missing info!) ⬇️<br> <a href="https://github.com/tylerbmcsilva/impeachment-2019">https://github.com/tylerbmcsilva/impeachment-2019</a></p> showdev gatsby react javascript