Personal story and impact
If there is one thing I know for sure, it’s that sometimes I’m
successful and sometimes I’m not. My name is Yinghui Gan, and
this is a story of how I overcame the barriers of language and
discipline to become a software engineer. Now, I’m successfully
standing on the doorstep of my new career, only because of all I
learned in the past.
I was a project manager of my own co-founded mobile game
company in China for five years. I had always been passionate
about game design even though I had never worked in a related
company before. For the first two years, my partners and I spent
practically all of our time reading all kinds of books about game
design, learning different types of mobile games and how other
teams build up the systems, coming up with new ideas, and
making demos. For a startup, the lack of funding and talent is
always an issue. So, besides all the tasks mentioned above, I took
the responsibility to build our development team, including
administrative staff, graphic designers, and software developers. I
also learned about hot gaming development engines and different
tech stacks so I could make the right decision which would be the
best fit for our team even though my major in college was optical
information and technology (which had nothing to do with anything
here). I was the “team fixer” who patches things up wherever the
team needed me to be.
In the third year, our team hit its stride. We signed a contract with
a publishing company and our team rose to the challenge. After a
year of hard work, our project “Lonely Dragon Mountain” launched
on the market and made some profit for us. While the prospects
were favorable at the time, the government introduced a series of
policies in the gaming industry that reduced the living space for small
startups.
So, I was 28 and standing at the crossroads of my life thinking
about where to go next. I decided to move to the US and become
a software engineer. With the experience of closely working with
coders and developers on a daily basis, a strong interest in
software engineering grew inside me, and I slowly developed the
ability to think like a coder. However, the problem was: how can I
do it all over again with a whole new discipline in a second
language that I also need to pick up?
Obviously, I did it! Like I said in the beginning if there is one thing I
know for sure, it’s that sometimes I’m successful and sometimes
I’m not, but I learn. I prepared myself with courses on Udemy and
Coursera to gain knowledge of software development and
improve my communication skills. When I felt ready for a more
immersive and interactive environment, I applied for the Flatiron
School. It’s the best decision I’ve ever made. After six-month of
exciting and intense learning, countless small assignments, and
five big portfolio projects, I can finally call myself a software
engineer.
Even though the path is arduous and long, I’m willing to learn and
finish strong. My name is Yinghui Gan, and this is a story of how I
overcame the barriers and became a software engineer.
My journey into programming
In my last job, my responsibility was to delegate assignments to
software developers and communicate project details. In this
process, I found that software engineers are intelligent people who
can always reach the heart of the matter and find a solution.
Watching them build a project from nothing is absolutely a delight
for me. That got me thinking if I could become one of them
someday, so I learned Java basic by myself just for fun. This
would be my first spark of programming.
The year 2020, as a truly eventful year, is sure to register in
history. Not only because of the pandemic but also people’s
lifestyles are changing along with it. Due to social distancing,
many interpersonal interactions have started to shift from offline to
online. In the early phase, we’re just ordering delivery or daily
supplies online. But during this outbreak, people tend to grocery
shop online, work remotely through online meeting platforms,
check floorplan using virtual methods, even see doctors online.
These behaviors all show that our life is changing rapidly,
accurately to say, our life is digitizing, which means there are more
opportunities in the internet industry now than ever before.
I’m one of the beneficiaries of this transition. Before Flatiron
School, I learned some JavaScript courses through Coursera and
adapted to a second language learning environment. However,
this approach has its drawbacks in that my learning process
wasn’t systematic enough.
So, I searched several coding Bootcamp, among those, Flatiron
School seemed the best choice for their professionalism and
interactive education methods. I signed up for a full-time
immersive software engineer curriculum and the task is to finish
five portfolio projects respectively in Ruby, Sinatra, Ruby on Rails,
JavaScript, and React.js. With each phase, we train ourselves
with many small assignments until we can utilize the knowledge to
build a project on our own. To move forward to the next phase, we
must get a pass from the assessment and live coding interview,
which in my opinion, is a perfect way to prepare us for the technical interview we’re going to encounter in the future.
Even though I graduated from Flatiron School, there is no end to
learning. Currently, I’m doing an office automation project using
the UmiJs framework, which is very similar to React.js. And, also,
I’m self-learning about data structure and algorithms, which I think
is a significant part of software development.
I prefer the mobile engineer role to the UI engineer role or
backend engineer role. UI engineer role and backend engineer
role are very specific about the technical stack. I love to learn as
much as I can to see where my interest reside. Another reason I
chose this over other roles is that I think mobile apps are the
general direction things are headed. With the advance of
technology, the frequency of using mobile devices will continue
increasing in the future. The demands of what mobile apps can
provide will also increase in the next few years. This means
starting an engineering career in mobile engineering is a great
way to receive the most cutting-edge information of this industry.
Engineering talent
When I was doing my previous JavaScript project, I felt like I was repeating myself over and over again. There must be some frameworks that integrate recurring code or functions to improve effectiveness. With React.js, it’s simpler to design a website or app more responsively. So I want to talk about my very first React.js project for this matter.
There are some requirements of this project, which are as below.
- This app should have one HTML page to render your react-redux app.
- There should be five stateless components.
- There should be three routes.
- This app must make use of react-router and proper RESTful routing.
- Use Redux middleware to respond to and modify state change.
- Make use of async actions and redux-thunk middleware to send data to and receive data from a server.
- The Rails API should handle the data persistence with a database. You should be using fetch() within your actions to GET and POST data from your API — do not use jQuery methods.
- Your client-side application should handle the display of data with minimal data manipulation.
- Your application should have some minimal styling.
The first idea that popped into my head was to create a Yelp-like app that demonstrates restaurants and shops. So to combine all these requirements and my plan, I need a Ruby on Rails backend to provide the external database for fetching. Three routes could be the home page, the shop page, and the shop detail page, which is dynamic. And also, I want to create a city page. With these routes, there will be more than five stateless components without a doubt.
Let’s take a look at the backend. This is a standard Ruby on Rails backend. I created this in my root folder and run “rails new backend — api”. Rails generate all the subfolders for me. All I have to do is to create models, controllers, serializers and set up the association that the shop has many reviews and review belongs to a shop. Then seed some dummy data and run “rails db:migrate” and “rails db:seed”.
(The link for the above part is ‘https://github.com/figo5530/React-Project/tree/main/backend')
Migrate folder has two migration files that show the relationship between the shop model and the review model.
(The link for the above part is ‘https://github.com/figo5530/React-Project/tree/main/backend/db/migrate')
And here is the link to the file that seeds dummy data into the database. (‘https://github.com/figo5530/React-Project/blob/main/backend/db/seeds.rb’)
I created a frontend folder in my root folder and run “create-react-app frontend”. After deleting unnecessary files and adding some folders, the structure becomes what you see in the link. (‘https://github.com/figo5530/React-Project/tree/main/frontend/src’)
The actions folder is where to put action creators. The homepage folder includes the home page js file and specific CSS files. The IMG folder stores shop’s image and city banners. The reducers folder only has one file — manageShop.js, which is handling actions and states to return a new state. The reviews folder and shops folder are where I store specific components.
City, CityContainer, and NavBar are just separate files because they don’t have that strong connection to other files.
I set up the NavBar at the top of app.js within the header so users can see this navigation bar on every page. Below are all the routes in this app, I didn’t create a city model to nest all of the cities under city because it’s just a small module of my app. On the contrary, I nested all shop detail pages under ShopContainer.
(The link for the above part is ‘https://github.com/figo5530/React-Project/blob/main/frontend/src/App.js')
In ShopContainer, if the URL is exact “/shops”, there will be a search bar component and a shops components taking up the full page.
(The link for the above part is ‘https://github.com/figo5530/React-Project/blob/main/frontend/src/shops/ShopsContainer.js')
In the search bar component, I also passed a callback function as props for it could change its parent component to change state so that shops component would know which shops to render. This is the best part I love about my project.
(The link for the above part is ‘https://github.com/figo5530/React-Project/blob/main/frontend/src/shops/ShopsContainer.js')
While navigating to a specific ShopDetail page users wouldn’t see this search bar and they will see the detailed info of that shop and the reviews of it.
In the ReviewsContainer there are two components. The first part is responsible for displaying all the reviews by passing them as props to the Review component.
The other one is handling adding comments. This action creator “addReview” has been passed to props through the alternative way of mapDispatchToProps which is a plain object.
(The link for the above part is ‘https://github.com/figo5530/React-Project/blob/main/frontend/src/reviews/ReviewsContainer.js')
In this project, I’ve learned so much about React.js. But still what I’ve touched is only the tip of the iceberg. There are so many useful libraries out there that I probably never heard of. To add minimal styling to this app I destructured some websites’ CSS files. Only find out there are tons of beautiful design libraries for us to use. I guess this is also a reason that UI designing is not what I do best.
