Lovelace Logs

Inspiration

We were inspired by Ada Lovelace as well as all women in STEM because they work hard and deserve resources to help them!

What it does

This site is a blog that has blog posts about different subjects as listed in our blog navigation bar. Some blog posts link to outside websites and sources while some are written by people associated with the site about their experiences.

How we built it

First, we brainstormed the project and what pages we would have in our site, how it would work, etc. Then, we made a detailed Figma mock-up of the site so we could reference it as we coded. After we had the Figma design, we started coding the website, breaking up the different pages and components. While the two of us with some experience did a lot of the more complicated programming, those who did not have experience worked on smaller tasks and did more outside research for the content of the site.

Challenges we ran into

We ran into some challenges with different aspects of the development process. Two of our teammates had little to no experience with javascript or react prior to this hackathon and it was most of our first hackathons. This caused us to run into small bumps in development such as bugs or communication issues, but they all were solved as we asked questions and researched the answers to our questions.

Accomplishments that we're proud of

We are proud of how much we learned about website development and implementing different components. This was new territory for most of us!

What we learned

We learned more about tailwinds.css and overall how to layout a site, including how to use components such as card and the navigation bar.

What's next for Lovelace Logs

Next, we plan on adding more features such as a search bar and making the site look more professional with more complex programming. We also plan to allow approved users to upload blog posts on a regular basis and hopefully grow our reach on social media and through maybe an email newsletter!

Built With

• html
• javascript
• react
• tailwind.css