Design to Code

This is an academic project that was assigned to a team of 4. As the name suggest, it is to build a Student Management system with a react JS front end. Since now I’m a bit familiar with react, and experience gained in past projects it feels less complicated.

But we still chose incorporate libraries for styling and we chose Material UI, which is a really good library and most of the components have slick animations. Although we have already started with Material UI we don’t want to completely cover the UI with it. Our plan is to use material UI only where it’s really needed and to bring a clean and interactive UI. Once the skeleton of the UI is completed we will be using Bootstrap to do the other styling.

That is just the face of it but we do have our own dynamic components like form validation for Login and Registration where only pure react is used for validation. There for there will not be any API calls to the back end unless the form validation is handled and form is submitted. Form Validation logic is mixed with Material UI’s ”FormControl API” to show errors and small helpers for validation. Unlike bootstrap where you simply include the classNames inside the HTML tags itself, Material UI works with props. Their documentation includes the list of props that needs to worked with in order to get the desired look. Below link would give an idea of what those props might be for the “FormControl API”.

Material UI FormControl API

Still getting the hang of it, It’s not going to as fluid and slick as the header image of this blog but I believe the added animations would increase the overall look of the app. After all, even if the back end logic is proper and stable, it wouldn’t matter to the user much if the UI is not pleasant.

Hackathon is an event or competition held to engage in collaborative Computer Programming.

So my first Hackathon was a short one, roughly 8 hours. We were asked to form a group of 4. And the project given was to come up with a creative solution in order to increase the potential for future tourism in the country. Requirements were, it to be a Website with frontend built solely on React JS and backend to be built in any desired framework/language.

At first, we were overwhelmed because we were restricted to a short deadline. We knew we wouldn’t be able to finish with a perfect solution with a perfect UI before the given deadline. So we gave importance to the Idea/Solution. Spent a lot of time figuring out a good solution with a clean UI, and created a UI layout with photoshop as a guide to help us create it in React.

We were not able to develop in React completely but made sure the solution was heard.

End of the day, we learnt more than programming, which was a really valuable experience.

Remember the days, you finished your code and you have all your build files in order and your app finally works the way you want it ? and then you share it with your friend/colleague and your whole app has collapsed because somewhere somehow something has gone missing..

That’s where maven could help out. Maven could manage all your dependencies in a pom.xml file and once you share it, they just have to run that file and install using maven and your app looks complete and back to life.

That’s not the only thing that maven could do, there’s a lot more. Just like “npm” you could easily find maven dependencies for most of the modules you are looking for, it even can bum your JDK from 1.6 to a newer version just by changing the pom.xml (Project Object Model) file and running it. Below is an example of how it looks.

xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.first.app</groupId>
  <artifactId>first-maven-app</artifactId>
  <packaging>jar</packaging>
  <version>1.0-SNAPSHOT</version>
  <name>first-maven-app</name>
  <url>http://maven.apache.org</url>
  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>3.8.1</version>
      <scope>test</scope>
    </dependency>
  </dependencies>
</project>

Maven can handle a lot more. But this is what i use the most for.

Below link explains a lot more on maven, it’s a great article, have a look. https://adityasridhar.com/posts/how-to-get-started-with-maven

Google unveiled Stadia at the GDC Event. An exciting day for the world of games. Games and technology always blended together, but when it blends perfectly it becomes the talk of the month.

Advanced game streaming, where you would only need moderate hardware and a good internet connection. Hopefully google would take the “Netflix” way where it would charge a monthly subscription for a library of games instead of charging per game.

Obviously it your experience depends on your internet connection, and it will take at least a few more years for us to get a hands on experience of complete virtual gaming.

Distributing Systems for a better world