<p><img src="/img/posts/room-to-budge/1.jpeg" alt="Screenshot of project home page"></p>
<p><a href="https://room-to-budge.web.app/">View project</a></p>
<p>For best results, sign in with username b@a.com and password "password".</p>
<h2>Frameworks &#x26; Languages Used</h2>
<p>React.js, CSS, Firebase, Node.js</p>
<h2>Design Process</h2>
<p>Since this project was created for a web development class, we did not focus
much on the design process. To view a more design-heavy project, check out my
writeup for <a href="https://www.bellalee.com/blog/posts/itemize">Itemize</a>.</p>
<p>Though our focus was not on design, but rather the implementation of our
intended functions, we still created
<a href="https://www.figma.com/file/8BGlRWDidakOIEQddLzsOH/Room-to-Budge?type=design&#x26;node-id=0%3A1&#x26;mode=design&#x26;t=7T4xWA5SMI7RNOap-1">Figma wireframes</a>
for our project. We used the first week of the course to map out our information
architecture and establish a rough visual identity, then focused on learning
through collaboration to bring our product as close to our vision as we could
with the skills we acquired both in and out of class.</p>
<h2>Learning Outcomes</h2>
<p>Through this project, I learned how to:</p>
<ul>
<li>Store and retrieve data using Firebase</li>
<li>Create API requests in the useEffect hook</li>
<li>Handle state more efficiently</li>
<li>Fetch data through the App component</li>
</ul>
<h2>Attributions</h2>
<p>Project created with Allyson Graylin for the University of Washington course
<em>INFO 340: Client-Side Web Development</em>.</p>


For INFO 340: Client-Side Web Development, my team and I created a budgeting application that aims to educate stakeholders on their spending habits.

Room to Budge — Web Development

Frameworks & Languages Used

Design Process

Learning Outcomes

Attributions