DEV Community: Olha Gruzglina

First steps with React Native Expo CLI

Olha Gruzglina — Fri, 22 Apr 2022 13:10:56 +0000

I hope this article will help you to avoid struggling from the first seconds of working with react native app 🤞.

When I came up with the idea for the final project, I thought it would better to do a mobile app (I wish I knew before what it would cost me 🤦🏻‍♀️😆). I was unfamiliar with mobile development when I started this journey, which is why I decided that the easiest way (for newbies 🤷🏻‍♀️) is to use Expo CLI instead of React Native CLI. Additionally, due to time limits, I only used iOS platform, and focused on the main goal and functionality, rather than doing less but covering both platforms. I will tell you everything that I now know based on this experience.

If you did not install React Native yet:

Check that you have installed:
- node (version 12 or higher),
- npm/yarn,
- code editor.
Then you can run on your terminal: npm install -g expo-cli or yarn global add expo-cli.
Create a new project: expo init YourProjectName (you can choose any template you want, I did the first one - blank).
Then go to your project folder cd YourProjectName, open your code and run it: npm start or yarn start.

You can open expo developer tool in the browser (first link) and manage your process from there, or you can open it on you mobile phone, just install Expo Go and scan the QR code.

If you do not want to use your phone each time you need to check your progress, you need to install Xcode, and after running npm start command press I button, it will open iOS simulator (for Android simulator you need to install Android Studio).
Installing Xcode can take some time, it took around 1 hr. Then tap Xcode on navbar -> Open Developer Tool -> Simulator. If you want to choose another type of device, then tap File on navbar -> Open Device -> choose whatever iOS device you want.
Yeey, now you can see your first result :)

You can tap R button to reload your simulator.

If you are working not only with front end, but also back end, you need to connect them to avoid CORS issue. If you add
"proxy": "http://localhost:3000"
to your client's package.json, then your client will know your server api and allow you to make requests to it.

Here is a React native documentation - https://reactnative.dev/docs/environment-setup
and Expo - https://docs.expo.dev/

Good luck!

What help me to save my time, nerves and life - Git

Olha Gruzglina — Mon, 21 Mar 2022 00:46:17 +0000

There is a magic pill that can help you and everyone else who writes code, it is Git! I recommend you learn it, and start using it as early as possible in your career! It should be your habit, your essentials.

To be honest, I cheated during my first two projects, I did not use Git the right way. I used it only because I needed to save and share all that, ahem-ahem, "pretty" code. But still, we tried to work with branches and commits, so at least we did not cram the entire project into one huuuge commit 😂. The first time we touched the same file to avoid having to deal with conflicts, my project partner sent me code via slack. However at the end of our project we tried the whole flow and it was not as painful as I imagined 😆.

I do not know how that happened, maybe because I was too scared to use this tool without any knowledge and experience, or because of the lack of time... However, I think you would have also preferred to spend 4 days on the project instead of learning Git and failing a phase...

During phase 3 project, since my partner was familiar with Git and worked according to its rules, I did not want to be a looser 😉. I was brave enough to solve conflicts on my side before pushing my code o_O. I had great experience, learned and tried a lot of commands, however I am not fully sure the commands I used were the best or correct ones, but it worked for me 🤷‍♀️.
Psst, we did 101 branches and 210 commits 😮😆.

The following commands I definitely found useful:

git status - check what branch I am on now, check if my tree is clear;
git checkout -b branch_name - create a new branch to work with every new feature on your project;
P.S. it is a good habit to name your branch this way - your_name/branch_name (ogruzglina/get_all_reviews_back_end), because when you have a lot of programmers working on the same project it is easier to find your brunch/commit.
git checkout branch_name (or git switch branch_name - new syntax (as of Git 2.23) or 'git switch -' if you want to go back to the branch you were on) - change the current branch to the name_branch;
git log or git log --graph (if you want to see visual graph of branches);
git diff branch1..branch2 - see difference between two branches;
git rebase master or main - if you're working on your branch and someone made changes to the master/main and you want to have these changes on your branch, then: checkout or switch to master/main do git pull, checkout/switch to your branch and execute git rebase command. You may have to resolve conflicts. However, it is better to do this before your commit on this branch, otherwise you might have fun time solving problems with divergent branches. In that case just do push and resolve conflicts during merge if you will have any;
git reset --hard HEAD~n or git reset --hard - revert n last commits or a specific one;
git revert HEAD - rollback the last commit in Git;
git stash - to discard all local changes, but save them for later;
git branch -a - to see all local and remote branches, with -r flag you will see only remote branches, without any flag - you will see only local branches;
git branch -d branch_name - delete local branch;
git push origin --delete branch_name - to delete remote branch.

Do not afraid of Git, just learn it, just do it, it will help you!
Oh, I almost forgot, you should read the terminal or console (wherever you run git commands) because you can see lots of hints there.

Everything ingenious is simple, and everything simple is ingenious

Olha Gruzglina — Tue, 22 Feb 2022 16:51:32 +0000

Or how I figured it all out 1.5 hrs before our 2nd project presentation... :D

At the end of the phase 2 of my studying in bootcamp we had one week to complete a project in React. My teammate and I decided to create a Secret Santa project ( Yeah, it is a bit late for it for this holiday season, however we can be prepared for the next one :) ).

On day one we discussed the functionality and we also drew up some part of our logic for better visualization. We came up with 3 pages: Home (with rules and possibility to chose two others), Individual, and Group gift exchange.

For the individual gift exchange the user needs to submit his or her personal info (name, last name, address and email), optionally choose a random gift, or create a wish list, and select a gift price range.
The group exchange idea is a possibility to create your own group of friends/co-workers (you need to submit name, last name, email and optionally gift price range).

There are two separate workflows for choosing random person as a Secret Santa:

for individual: we take a person from the database (db) who has the same set of parameters (random gift or price range, and does not have a Secret Santa), and match these two people, send info and delete from db, so that they can participate again;
for the group exchange we decided to change the workflow, since it would be too predictable, that is why if a person already has a Secret Santa, then this person can not be a Secret Santa for his chosen Secret Santa (it is one way connection).

When we had a picture of our project we started working on it, we created pages, user structure, forms, got some fake users from some API, all logic for individual exchange. However, group workflow gave us some trouble. I was surprise, as I thought that individual part would be harder. A lot of tries, brainstorms, and then again a lot of attempts that did not bear fruit.

After a sleepless night on the day of the project I made a breakthrough but still there was a bug in the logic. I was confused and lost as to why it is happening and how to fix it. With lack of time, I, unfortunately, lost myself... no, I did not give up, but I tried to code whatever could help without understanding what I was doing and why, it was kind of monkey testing but during coding... I hoped that my experience in manual QA helped me, but it looks like it did not :D

On the due date, one of the teachers spent at least 2 hrs trying to figure out what happens in our code, and as a result he simply explained what we should have done when we started working on something, it was so simple and ingenious! When you have your task you need to divide it, and then divide it again, even if it seems already simple you can and should divide it again. For example, brushing your teeth is a simple task, but it includes a lot of steps with important sequences. Start with most important part, with a heart, without any UI, db structure and etc, just in a primitive way, and then when these pieces work you can connect them, wrap them, and do whatever else you need.

When I changed the code similar to his explanation it looked much better and all other functions were easier than before. It was a chain reaction.
One of my mistakes was that I configured the user structure at the beginning and then my hands were tied because of that. You can look at my piece of code and my instructor way of thinking:

before explanation
explanation
after explanation

New way gave us the possibility to reuse some functions for group exchange logic. We deleted some functions and that helped us omit async changes to array (that was the 2nd cause of our problems).

Now I understand we need to develop our computational thinking skills, and start every task/solution from the simplest pieces of the big puzzle! Do not overthink, and as a result do not overcomplicate.

Inscrutable ways or how I returned to the path of a software engineer

Olha Gruzglina — Sun, 30 Jan 2022 00:46:24 +0000

Hi, I'm Olga or Olya, I was born and raised in Ukraine where I graduated with a degree in computer science in 2012. However, I have never worked as a programmer, "thanks" to some of my professors and friends who ruined my self-esteem, confidence, etc.. They did it so effectively that I was terrified to even attempt it, after which I stopped looking in that direction :(
Regardless, I decided to stay in IT because for me it is an interesting field, and I became a manual Quality Assurance Engineer. ( Yeees, I was that pesky person who always annoys the developers :D )

I immigrated to the US in October 2019 and left behind everything I had. I am grateful to my husband who was able to, step by step, give me confidence and break the wall with all those stereotypes that fettered and limited me. After a while I realized that I want to pursue a career as a software engineer. However, since I obtained my degree in another country and never used those skills, I feel like I am coming into tech field as a newbie. I know that the world of technology always changes very rapidly, and I missed many years of knowledge, experience, and changes in this area. With that in mind, I have taken my first step towards getting back on track, and now I am a software engineering student at Flatiron School!

I am happy to be among the passioned and focused people, who are not afraid to change their lives and do what they love. I don't want to lie, it is tough, and I still have 12 weeks of intensive program ahead of me. I am excited and overwhelmed at the same time, sometimes frustrated and definitely tired (thanks again to my husband, he looks after the kids after daycare and cooks while I am on campus or continue studying after the kids go to bed). However, it is rewarded with happiness of getting something to work, with confidence when you passed the test with understanding and when you completed your first project. I believe and hope that I will succeed and I do not want to give up no matter what!