salvillalon45 / your-story

It’s Your Story! Take Control!

Your Story

[The Odin Project: Javascript] - Project: Final Project

Intro

• This was the final project for the Odin Project Frontend module. I challenged myself to create something new, something that could help people. As I was thinking, I realized that something that I value and has helped me a lot is the power of reflection. Reflecting allows people to stop and thnk on what they are doing. Helps clarify what are the next steps you want to create and take. I wanted to create a tool that people can use to reflect. This is how Your Story was born! I create this logo above.
• Project Task: The Odin Project - Final Project
• View Project: https://your-story-sv.web.app/

📗 Fonts used

• Rufina by Martin Sommaruga
• Source Sans Pro by Paul D. Hunt

🎨 Color Reference

Color	Hex
Turquoise	#80ccbc
Black	#141720
White	#fff
Grey	#1c1f2a
Orange	#f79e77

Overall

• In this project I challenged myself to not use SASS. Instead, I practice using css-in-js and Styled Components
• I also tried to deploy my app to Netlify but I learned that it only works for static websites
• I challenged myself to think of a way to share their created timeline. I thought of many different ways such as:
  • Share similar to how you share a tweet, but I was not able to figure it out
  • Share a url to this rendered component
  • Export to HTML
  • Print the rendered component as a PDF
  • I went with printing it using the package react-to-print!

Design

• Design Inspiration Came From Amie Chen. From this design I got the colors. I really like the style choice Amie picked
• Design Inspiration Came From Rron Berisha. From this design I got the idea for the landing page

Styling

1. Learned how to use makeStyles to create custom css-in-js classes
2. Learned how to use withStyles to override Material UI Components
3. Learned how to override Material UI Components and use props to make styling appear based on props

const FormTextField = styled(TextField)`
	.MuiInputBase-root {
		color: ${props => (props.white ? 'var(--white)' : 'var(--black)')};
		font-family: var(--source);
	}

	label.mui-focused: {
		color: ${props => (props.white ? 'var(--white)' : 'var(--black)')};
	}

	.MuiInput-underline:after {
		border-bottom-color: ${props =>
			props.white ? 'var(--white)' : 'var(--black)'};
	}

	.MuiInput-underline:before {
		border-bottom-color: ${props =>
			props.white ? 'var(--white)' : 'var(--black)'};
	}
`;

2. I learned how to use if and else statements in Styled Components

const NavigationToolbar = styled(Toolbar)`
	background-color: ${props => {
		if (props.footer) {
			return 'var(--grey)';
		} else if (props.landingFooter) {
			return 'transparent';
		} else {
			return 'var(--white)';
		}
	}};
	align-content: center;
	justify-content: ${props => {
		if (props.footer) {
			return 'space-between';
		} else if (props.landingFooter) {
			return 'flex-end';
		}
	}};
	padding-top: 19px;

	&& {
		align-items: baseline;
	}
`;

Development

• Learned how to use React Context

  • I came across React Context during my search for an alternative to Redux. In past applications, setting up Redux took time and this was going to be a small personal app that did not need the entire Redux setup. Also, when working with Gastby there is no such thing as Parent Component. So passing down props was going to be challenging
  • Everything changed when I came across this article by Yingqi Chen where she answered all my questions!
  • Thanks to this article as well from Muhammad Muhsin for helping me understand

• I really liked how we wrote everything down first! I made a plan of all the things that were going to be involved. This is how I identified the problem of having a parent component

• Learned how to use react-to-print to get print to pdf a render component!

• Learned how to create a shallow db to make it easier to retrieve data instead of nesting a lot things into it

• Learned how to use Firebase Authentication to create, login, and logout users

• Also, I wanted to become a better full stack developer and that means learning about the tools that we use everyday. One tool that I use everyday is console.log() I came across this article by Harsha Vardhan where it showed other functions of console!

  • I tried many such as

    • console.group() and console.groupEnd()
    • Styling your logs

    const spacing = '10px';
    const styles = `padding: ${spacing}; background-color: white; color: red; font-style: italic; border: 1px solid black; font-size: 2em;`;
    console.log('%cI am a styled log', styles);
    console.log('%cI am a styled log', styles);

Technologies:

• React
• Material UI
• Dribble
• Styled Components
• Firebase for Authentication and Hosting
• Gatsby