[Project Log] AllThatWord

You can check this website on Github repo or this link.

Day 1

What I did

1. Set up for the project: Install React, Typescript, Tailwind, react-router-dom, ESLint, Prettier
2. Update README.md
3. Style Header, Footer using tailwind

Source:

• [React] create-react-app & Typescript 초기 세팅법
• [React] Typescript + eslint + prettier 설정

Troubleshooting

• VSCode prettier format on save doesn't work, So I followed this stackoverflow answer and changed 'Editor: Default Formatter' to 'esbenp.prettier-vscode' on setting.json file.

Day 2

What I did

1. Create SearchBar component
2. Install react-qurey, axios
3. Create Search page and fetch data using react-query and axios
4. Install react-icon
5. Style isLoading and isError using tailwind

Source:

• react-router-dom useParams
• react-router-dom Link

Troubleshooting

• I got an error message said "Argument of type 'string | undefined' is not assignable to parameter of type 'string'". But I know that it is string, so I used non-null assertion operator. TypeScript Documentation

Day 3

What I did

1. Style Search page
2. Install firebase for login function
3. Implement 'log in with google', 'log in with github' function

Source:

• firebase Documentation Authentication
• react useContext

Troubleshooting

• I want something to handle login status.
  • followed this blog
  • and I'm not used to the concept of 'useContext' and this blog post helped me understand.

Day 4

What I did

1. Implement 'save word' function and connect to firebase Realtime Database
2. Implement Admin page to show saved words

Source:

• firebase Documentation Realtime Database

Troubleshooting

• I want to add key(string type)-value(object) object to 'words' object, but I got an error message said 'Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'.' And I realized that I need to define the key type of the object. So I made an interface called LooseObj. index Signature

  export interface LooseObj {
    [key: string]: object;
  }

Day 5

What I did

1. Implement change viewmode function on admin page
2. Implement flashcard function on admin page

Source:

• How to Create a Carousel using React Class Components and Tailwind CSS
• Card flip on onClick

Troubleshooting

• I want to get blue box element(the parent elemenept) whenever I click that element. But when I clicked green box part, I got green box instead of blue box. I need kind of the opposite function of e.stopPropagation(). I couldn't find the exact function that works exactly what I want. But I can implement by checking the element has specific class that I assigned to the blue box element manually.

Day 6

What I did

1. Style responsive design
2. Fix minor errors

Troubleshooting

• I made a function that moves to another page when I clicked synonyms or antonyms. But when I move to another page with a different keyword, the input value on the search bar doesn't change to the changed keyword. So I made an optional prop called 'query' and used useEffect to change the input value whenever the query changed.

	type Prop = {
  		query?: string;
	};

	const SearchBar: React.FC<Prop> = ({ query }) => {
  		const [inputValue, setInputValue] = useState(query || '');

  		useEffect(() => {
    		setInputValue(query || '');
  		}, [query]);

  		...
	}

Day 7

What I did

1. Implement dark mode
2. Deploy using vercel
3. Update README.md

Source:

• tailwindcss Dark Mode

Troubleshooting

• I deployed using vercel but got an error about firebase api keys. So I googled 'how to add environment variables on vercel' and I set some firebase api keys by following this article.

Day 8

What I did

1. Fix minor errors

Troubleshooting

• When I searched 'sp', the result was like the image under this paragraph. There were many Noun definition. So I made an empty array. And when I mapped definitions of word, I pushed 'part of speech' of one definition to array. After that, I checked if this part of speech is already in the array. If so, I didn't return that definition.
  

	{data.meanings.map((meaning: Meaning, index: number) => {
		if (index > 0) {
            arr.push(data.meanings[index - 1].partOfSpeech);
          }

          return (
			!arr.includes(meaning.partOfSpeech) && (
              <div key={meaning.partOfSpeech}>
              	...
              </div>
          )
	}

Day 9, 10, 11

What I did

1. Implement multiple folder function
2. Deploy using vercel
3. Update README.md

Troubleshooting

• I used firebase realtime database to save users' words. When I deleted all words, the database deleted all data including userId. So that makes a lot of errors on my app. So I saved 'isSignin' data when the user signs in at first. It prevents deleting all data of the user.