DEV Community: Enid Nyatichi

My First Full-stack App using Ruby Sinatra

Enid Nyatichi — Fri, 01 Jul 2022 18:30:40 +0000

Hello guys I hope you are all doing good.In my journey of becoming a Software Developer, I most recently learnt Ruby Sinatra.
The first thing I did was to set up my environment. This included setting up a database and a web server. I chose to use sqlite for my database and postgresql for the backend. I started by creating an app that would serve as the backend of my react app.

Afterwards, I created a react component that would be used as the front-end of my application.

I then connected these two components together by using React Router's Link component to pass information from one component to another with ease. The final step was adding some styling and formatting to make the UI(User Interface) more appealing.

I must confess that in all the languages that I have learnt this seemed a little bit easier compared to the rest.I quickly fell in love with it and just want to encourage anyone who has been wishing to learn back-end to try it out.The following are some of the advantages of Sinatra:
1.It is simple yet elegant to implement and configure.
2.It is flexible hence can be used to build any kind of application from a small one to a full-scale web application.
3.It is lightweight;when writing a react app there will be no wasted features or unused functions.This means that it uses less memory and runs quicker.
4.It is unbiased hence giving a developer full control over how to best implement their application.

React

Enid Nyatichi — Fri, 27 May 2022 13:42:59 +0000

This week I was able to create a TV show react app. The application allows users to choose movies from a list and view information about them. The app has three routes: the home,login and search route. The home route displays the list of movies when a user searches using any keyword and on tapping a particular show the user can be able to see the genre,rating,screening status,official site and some brief description of the movie. The search route displays a text-box where users can enter their search query which then searches for movies matching that query and displays them in regards to the keyword entered.The login route basically is the page where a use sign up if they don,t have an account,log in if they have an account and also sign out.
I achieved all the above using React.This was a new experience for me because I have never created a react application before so I had to learn so many concepts in react.The advantage of using react in building applications is that you create single paged applications which means that they have a single HTML file containing all the content of the application. This type of application is advantageous because it is easy to maintain and provides an instant response to user interaction.The app can be used on both desktop computers as well as mobile devices such as smartphones or tablets.In this blog I'm going to take you through react and various concepts in react.

React is a JavaScript library for building user interfaces.React was first developed in 2011 at Facebook as part of the company's internal toolkit for the development of web applications. The library was open-sourced in 2013 under a BSD license and has since become one of the most popular front-end libraries in use today. React has a declarative, efficient, and flexible approach to building user interfaces.It is used for handling the view layer of an application, and can be used to build both websites and mobile apps.Most people confuse it for being a framework.However,it is not a framework, but it has a few features that make it easier to build web apps with.
React uses a virtual DOM to efficiently update the actual DOM. React provides a set of powerful features that make it easy to build large, complex applications with data that changes over time.
React uses what we call components which are one of the most important parts of React. They are created with JSX, a syntax extension to JavaScript that allows us to declare what our UI should look like in HTML-like syntax.Components are independent and self-contained, they can be reused throughout your app and they can be updated easily without affecting the rest of the app.
There are new features that simplifies how you can use React with state and lifecycle. These features are called hooks.The React Hooks API is a new feature that was introduced in React 16.8. It has been created to address the problems of useState and useEffect, which are two other features that were introduced in React 16.7.Hooks provide a way to declare functions that can be called by other components, even those outside of the component’s hierarchy.They also give you more control over when the component should update and how it should update by making it possible for you to specify the lifecycle hooks that your component will react on.
Another important aspect of react is routing.React routing is an open source JavaScript library that helps developers create single page applications with ease.It helps in managing the URL,navigational links and to add new routes.
With all these, I would like to say that React is a very nice library because of its simplicity and ease of use and everyone should try it out.

My coding journey

Enid Nyatichi — Sat, 23 Apr 2022 18:32:55 +0000

Writing my first "Hello world" was scary and at the same time very exciting. It was scary because it was my first time giving a computer a command and I was not sure if it was going to obey. I felt so excited when it obeyed and I gained confidence to manipulate it to do more.
In a month, I have been able to learn html,css and Javascipt which is basically front end development.I'm so proud of myself because I have been able to apply this knowledge in two projects. I made a portfolio using html and styled it using css and recently I made a Budget expense tracker using html, styled it using css and used javascript to provide interactivity.
I love styling and designing so so far css has been my best interaction.I haven't fully mastered javascript, but I'm sharpening my skills by watching youtube tutorials and doing daily practices.
In my budget expense tracker project, I got to interact with a new concept of APIs.At first, it was hard to understand and implement but, later I got so amazed by how APIs works.API is the acronym for Application Programming Interface, which is a software intermediary that allows two applications to talk to each other. APIs allow us to add important data and functionality to the applications we build. You can think of an API as one way in which data is exposed to us developers for use in our own programs.Each time you use an app like Facebook, send an instant message, or check the weather on your phone, you’re using an API.
In my project I used the currency converter API.This API has data of all currencies in the world. I implemented this API in my project to help in converting the income,expense and balance values from euros to all other currencies in the world.
Below is a guide on how I went about fetching data from my API and how I manipulated it to convert the income, expence and balance values to various currencies in the world:

fetch("https://api.currconv.com/api/v7/currencies?&apiKey=0243a45e9b454a58911028adbd33c090")
. then(res => res. json())
. then((out) => {
console.log(typeof out.results);
const currencies = out.results;
for (element in currencies){
  var opt = document.createElement("option");
  opt.value= currencies[element].id;
  opt.innerHTML = currencies[element].currencyName;
const newSelect =document.getElementById("currency");
newSelect.appendChild(opt);
}
})
. catch(err => { throw err });

function changeCurrency(){
  const id = document.getElementById("currency").value;
  fetch(`https://api.currconv.com/api/v7/convert?q=USD_${id}&compact=ultra&apiKey=0243a45e9b454a58911028adbd33c090`)
  .then(response => response.json())
  .then(data =>{
    for(con in data){
      console.log(data[con]);
      const balanceValue = balance.innerHTML;
      const newValue = balanceValue * data[con];
      balance.innerHTML = newValue;

      const incomeValue = money_plus.innerHTML;
      const newIncome = incomeValue * data[con];
      money_plus.innerHTML = newIncome;

      const expenseValue = money_minus.innerHTML;
      const newExpense = expenseValue * data[con];
      money_minus.innerHTML = newExpense;
    }
  })

}

I must say it has not been a walk in the park. Day by day things get harder but, I have had to get tougher and more disciplined for me to manage all the pressure that comes with coding.Despite all the ups and downs coding has given me the best experience, exposed me to challenges that have made me stronger,smarter and sharper.It's a journey I don't regret starting and encourage people to venture into it.