Skip to content

Instantly share code, notes, and snippets.

@srikant-code

srikant-code/My projects explanation | Srikant Sahoo.md

Last active March 2, 2021 06:23
Show Gist options
  • Save srikant-code/01d8c969b095f6a76d56577bfebc52aa to your computer and use it in GitHub Desktop.
Save srikant-code/01d8c969b095f6a76d56577bfebc52aa to your computer and use it in GitHub Desktop.
Download ZIP
My projects explanation | Srikant Sahoo
Raw
My projects explanation | Srikant Sahoo.md

Hits

My Top Project Details so far

The below descriptions are based on these parameters

  1. Brief description of the project.
  2. Who was the project made for?
  3. Outcome/Impact of the project.

Summary

About MayaData (Startup)

I had started off working on UX of the product “Litmus” at MayaData. Litmus is a open-source SaaS platform for doing Chaos Engineering on Kubernetes.

Then transformed my way going Full-Stack. and developing software using the stack Golang, GraphQL, React, Plotly.js, as well as contributing to UX where needed as part of design-dev weekly disscussions.

During the course of time, I had worked on multiple projects: UX of the internal dashboards of Litmus, the product landing page “litmuschaos.io”, and event page “chaoscarnival.io”, Kubera Propel Backend & Growth Metrics Backend for Kubernetes and also illustrated the brand mascot ‘ChaosBird’ for Litmus. I was working with cross-functional teams that are formed and disbanded according to requirements with Agile practices.

UX, UI, Golang, ReactJS, GraphQL, Plotly.js(charting library), docker, kubernetes & mongoDB.

ChaosCarnival.io Event page | MayaData

Details

  1. Brief Description of the project
    It is the landing event page for a global two-day virtual conference for Cloud Native Chaos Engineering.

  2. Who was the project made for?
    Kubernetes developers and SREs and cloud enthusiats intrested in Chaos Engineering.

  3. Outcome/Impact of the project
    The event is supposed to happen on the month of Feb 2021. This event will happen globally. It is the main flagship event of MayaData(Emerging Startup). ChaosCarnival landing page aims to attract the users to participate in the event.

Useful links

Tech Stack

ReactJS | Figma | JS | HTML5 | Styled components | React Lazyload | ps2pdf(image compression) | Github

Team

It was a corporate project and all the members were MayaData employees & not from KIIT except me and Mayukh(1806391)(both as intern)

My Contribution

I have handled the full design(UX and UI) of the sponsorship page and home page as well as contributed to the coding of the frontend in React wherever fixes were needed. I also looked into the image optimizations to increase the page loading speed, and thus improved the page speed insights by 30~ points presently 90/100 which was earlier at 61/100 for desktop devices.

Challenges faced/solved

  • Image optimization: The initial page loading time was very high. I was asked by the scrum master and the lead developer to look after it. So when I debugged the website using chrome dev tools I found that the hero image used by the developer was taking up a huge bandwidth(around 10Mb HD quality stock photo). So I replaced each and every image with compressed versions without losing significant quality(around 50kb) along with conditional image rendering for mobile and desktop devices which boosted the performance and saved a lot of bandwidth.

  • The other challenge was the developed website after being developed by the developers was not matching with the design. There were many CSS issues in the code. So I made the required fixes. In the attached GitHub commits pdf you can see that I have removed around 6000+ lines of code and in place I have replaced it with shorter, correct, and efficient code(~ <2000 lines of code).

https://chaoscarnival.io is itself a global event page. You can check the social links at the footer.

Kubera Propel Backend | MayaData

Tech Stack

Golang | GraphQL(gqlgen) | Docker | Kubernetes | AWS | Minikube | Github

Details

  1. Brief Description of the project
    Kubera Propel is based on the most popular open-source Container Attached Storage project, OpenEBS, which MayaData started and continues to lead.

  2. Who was the project made for?

  • Kubernetes developers and SREs.
  1. Outcome/Impact of the project
    It is a SAAS platform so It will help the SREs to monitor their systems and make them resilient. Propel will give them the ability to manage their container attached storage(CAS) directly through the web UI without the need for a cmd console. The resilient systems will help every company and its users across the world to become more reliable and responsive to unexpected disasters.

This is a private company MayaData’s project. I cannot provide any links except Kubera Propel Github’s private repository screenshots.

Team Members

It was a corporate project and all the members were MayaData employees & not from KIIT except me(intern)

My Contributions

I have looked into the Cluster registration part which was the entry portion of the whole backend. I have created a total of 7 API endpoints involving CRUD using Golang, GraphQL(gqlgen), and MongoDB. And I was a part of daily scrum meetings with frontend devs to collaborate on the progress of the project. I have created a lot of PRs and had done many code reviews of my peer teammates so that we all will be on one plane.

Challenges faced/solved

The whole project was fully challenging like a roller coaster. This project is an innovation which clearly means that we were the first one to do that(i.e no help in case you are stuck). It was so difficult to get into the core concepts of Kubernetes within 15-20 days time from scratch as a beginner. Our college curriculum never had anything close to this field.

But I addressed it by taking the help of youtube and other GitHub projects to learn the best practices of Golang. And StackOverflow too didn’t have many answers due to which it was a headache whenever you get stuck. And learning Kubernetes was possible only with the hit and trial approach for me because it is so vast and the resources are too few to understand that I had to experiment and invest a lot of time into it, making and solving mistakes on my own and taking the help of my project leader. And this way I finally was able to grasp the concepts and then contribute to the project and adding ~7200 Lines of code to the project.

Hacktoberfest KIIT 2020

Tech Stack

Figma | Illustrator | ps2pdf(image compression)

Details

  1. Brief Description of the project
    Three of our societies present in KIIT i.e DSC KIIT, Mozilla Club BBSR & MSPC KIIT collaborated together with MayaData to host the local Hacktoberfest on our campus. So we made the event landing page, posters, certificates swags, etc to promote opensource contributions. There were 25-30 members but 5 in design-dev of the website(including me).

  2. Who was the project made for?
    This project was meant for KIIT students only.

  3. Outcome/Impact of the project
    We got a total of 700+ registrations for our event throughout our whole KIIT campus in the month of October 2020.

Useful links

Team Members

  1. 1829199, Srikant Sahoo(UX/UI)
  2. 1806391, Mayukh Mallick(UX/UI)
  3. Ishan Gupta(4th year Coding)
  4. Sayan Mondal(4th year Coding)
  5. Junaid Rahim(2nd year Coding)

My Contributions

I was responsible for the UX as well as the UI of the whole landing page to convert the participants into open source users. Used Figma as the platform to collaborate on the UX and UI prototype and google meet for design-developer discussions. All coding was done by other members using React. I had also created the participation certificates for the participants and posters for promoting the event.

Challenges faced/solved

There were various UX problems: One was about whether to use cards or a timeline view for event’s agenda. But we found cards would be the best possible option to develop within the shortest time period so we went for it. Other was about the timer issue. We needed to keep a timer but the length of hrs, mins, secs of "12 Days 14 Hrs 30 Mins 60 secs"was making it too large in mobile screens that it was ruining the design. We solved it by changing it to “12d 14h 30m 35s” format which was of less width as well as convey the same mesage to the users, after a lot of re-considerations.

The MOVIE database

Tech Stack

JavaScript ES6 | Sass | CSS 3 | HTML 5 | Figma | Photoshop | Illustrator | Vercel | Github

Challenges faced/solved

I had some issues with fetching data with the TMDB(The Movie Database) API. The solution was using Cross-origin resource sharing(CORS) that solved it.

Also, I learned how to make a multi-page application using only vanilla JS without using any framework. The main motive of this was to get into the internals of JS and build the application from scratch that opened my mind so I learned more rather than If I had used react that would have made it much easier. I exactly don’t know why but I like to do things the hard way and also take a different approach that no one would ever take :P

Details

  1. Brief Description of the project
    Movie New tab is going to be an extension that can run in chrome and firefox browsers. The main intent is that when the user opens a new tab they will get a random movie and their details and the expected time they can finish watching it if they start now.

  2. Who was the project made for?
    But this extension is not yet published to the store(I don’t have the Google developer console account). But you can still search for your favorite movies and get the details about them in the web app. I will soon publish it to the store in near future with more features. After that, it will be available to all the internet users across the globe to use(mainly for youths).

  3. Outcome/Impact of the project
    Not yet measured. Will be able to know its impact after the Chrome Webstore launch.

Useful Links

https://movie-new-tab-extension.vercel.app - Live hosted link
https://github.com/srikant-code/My-Front-End-Codes - Github Link

My Contributions

I have designed the whole UI as well as its UX on my own using Figma. And also was responsible for the project planning and its execution, documentation.

Portfolio

Challenges faced/solved

Since when I started I didn’t knew React. So I started with what existing knowledge I had(HTML, CSS, JS, Sass). As the codebase grew larger my HTML file was having around 2500+ lines(because of inline SVGs to reduce network calls) which were very difficult to manage and efficiency decreased. So I had a workaround. I separated projects to another static page. But the problem with this approach was still all the project section code was static. Even if I had to correct a spelling mistake I had to scroll a lot in the codebase.

So what I have done - I saw that all the project section cards were very similar in structure. So I created a JS file and I created a JSON with all the data of my all projects in it and through logic, I looped through everything in the JSON and generated the static “myprojects.html” file with very few lines of code.

A better approach would have been: If I had used React initially, and passed everything as props then it would have made my life easier. But it’s the same thing I have achieved the same result without using any other heavy JS framework which is at least not required for a portfolio website.

What I learned the hard way: When we are dealing with a lot of data it is better to automate the process and generate the files otherwise manual inspection always leads to errors.

My Contributions

I had designed the whole UI in Figma and then coded it as well. And since during this project I already knew CSS so I tried something new by implementing using SASS in this project. I have used all my gained skills to make it as responsive as possible.

Details

  1. Brief Description of the project
    This is my portfolio website containing all my academic and professional details.

  2. Who was the project made for?
    For all the recruiters, friends, and family.

  3. Outcome/Impact of the project
    Well, I have not publicized it on social media. But still, I had got plenty of visitors mostly from Linkedin as per my google analytics tracking. And I also got a client for a Graphics Design freelance contract-based project by Milk India Company founder Shilpi Sinha (https://www.linkedin.com/company/milk-india-company) which was used for their product advertisement in an app named “DailyNinja” in the play store.

Useful Links

Tech Stack

JavaScript ES6 | Sass | CSS 3 | HTML 5 | Figma | Photoshop | Vercel

Bladers Multiplayer spinning tops(Game UX)

Details

  1. Purpose of the work?
    This game has been designed for normal adult users 16+. This game is published in the play store. The main intent of the game is to give the users an AR-based platform so that they can play their childhood game “Beyblade” online with friends and compete against them in their real environment.

Useful links:

  1. How did you go about doing the design?
    • Yes, first of all, I did the user research
    • then had done the competitive analysis about other similar Beyblade apps(what are their features, theme, process)
    • then made the workflow
    • and then the low fidelity wireframes according to the workflow(Took care of Fitt’s law since in a game that is of utmost importance)
    • then had design-dev discussions and got feedback
    • reiterate on the previous processes
    • then upon approval decided what will be the components, game gradient colors, Game font/typography research and decided to go with a dragon theme
    • after all this is done started putting them in the wireframes to make high fidelity design
    • then showcased to the developer for feedback
    • this process continued for 3+ weeks.
    • Also used the Hick’s law when making the in-app purchases section/shop.

  • For the release we required play store icon & image screenshots, we discussed it. I have done the competitive analysis of the similar Beyblade apps(how they are putting up their features in front of the users to get max CTR through their icons). I got the idea and then started creating the graphics exactly the way I thought. I have made the icon such that it gets to stand out from the rest of the others with a yellow background that no other app in the surrounding had. Also, I was required to make an animation for the Google Adsense in-game ADs. That too I have done it in Figma.

  • Outcome - we got 10k+ installs within a span of 1st 20days within the release. The play store ratings are very high i.e 4.7 with 189+ reviews which indicates that things have gone right :D. I still have some feedback from the users and will look to consider them in the coming days.

MayaData Projects

  • ChaosCarnival.io - UX Mentioned in the general form. But this project was based on MayaData(emerging startup)

LitmusChaos.io UX

  1. Purpose of the work?
    This project is designed for Kubernetes developers and SREs. It was a real corporate project of MayaData for their open-source product named “Litmus” (https://github.com/litmuschaos/litmus). It is the landing product page having all the details about the product litmus, its community, docs & important links & resources, etc.

Useful links

  1. How did you go about doing the design?
  • Yes, the user research was done by the scrum master before I joined. So I took the UX process from there. So then we have done the competitive analysis. Our major competitors in the market were- keptn.sh, rook.io, okteto.com & gremlin + others. So we analyzed their workflow and then decided on the initial wireframes. I read an article back then that said the importance of “content-first UX strategy” so I dig into it & suggested it to the team. So we included all the content into the wireframing stage rather than deciding at the end. It had made it a lot easier for us to make the required “Chaos-bird” (Brand Mascot) graphics & illustrations that were relevant to the content. It saved us a lot of time and we were able to submit the final design within 10 days to the developers.
  • The theme used was to use a violet gradient with a bit of neuromorphism. And yes then many design-dev-related discussions took place and we took the feedback and re-iterated the process. The approach was still the mobile-first approach so we designed that version as well during that time.
  • We finally published and launch the website live on September 15th, 2020 within a span of 1 month.

Freelance & volunteering work, Visual Design work:

Developer Student Clubs KIIT(DSC KIIT) & Mozilla Club BBSR societies & Team Curate(small startup)

  1. Purpose of the work?
    The society’s work was mostly for the students of our KIIT university students. We were organizing multiple tech-related events and talks. To get people for the registration we required the posters, banners, google forms, and email writing, and I was responsible for these.

Team Curate was one of my freelancing projects and it is a small B-school startup: So it aims at teaching & learning Business related topics so the users are mainly MBA students.

  1. How did you go about doing the design?
    • When I started it was solely self-learning. I made myself learn Illustrator, Photoshop, Figma, XD and all other design tools and techniques. I have been making poster designs for all social media platforms(Twitter, Linkedin, Facebook, and Instagram) for DSC, Mozilla, and Team Curate. And I am the design lead at Mozilla Club BBSR and is guiding my juniors in transferring my skills.
    • I have made the required deliverables(brochures, posts, logos, banners, website UX)

UX tools I know | worked with.

Startup/ Freelancing Details 🚀

Startup/ Freelancing experience details 1

  • MayaData Startup I had started off working on the UX of the product “Litmus” at MayaData. Litmus is an open-source SaaS platform for doing Chaos Engineering on Kubernetes.
  • Then transformed my way going Full-Stack. and developing software using the stack Golang, GraphQL, React, Plotly.js, as well as contributing to UX where needed as part of design-dev weekly discussions.
  • During the course of time, I had worked on multiple projects: UX of the internal dashboards of Litmus, the product landing page “litmuschaos.io”, and event page “chaoscarnival.io”, Kubera Propel Backend & Growth Metrics Backend for Kubernetes and also illustrated the brand mascot ‘ChaosBird’ for Litmus. I was working with cross-functional teams that are formed and disbanded according to requirements with Agile practices.

Startup/ Freelancing experience details 2

Team Curate: I was the lead Designer there handling all the things related to the design and growth of the startup. Well, it was a freelance contract work which span for a duration of 4 months.

Startup/ Freelancing experience details 3

Done many freelancing works: Created various event posters and the work mentioned Milk India Company in the general form as well was a freelance work. For more information: https://drive.google.com/drive/folders/1QVDhwAcaO6RQDrc6aRcpOuARV_AIZyiw?usp=sharing

GeeksforGeeks profile: https://auth.geeksforgeeks.org/user/srikantsahoo/practice/

Academic Achievements 🏆

  • Participated in India’s Biggest Smart India Hackathon(SIH) - 2020 - Contributed to open-source projects during Hacktoberfest 2019 & 2020 - Participated in Flutter Workshop Community Learning 2.0 and Code a Line 1.0 contest organized by KIIT E-Cell (2019). - Cracked JEE mains with general category rank 70848 without any coaching on my own(2018) and appeared JEE Advanced as well :D - Got a scholarship worth rupees 5000 for being a meritious student in class 10th given by the KVS Foundation(2016).

Extra Co-Curricular Achievements 🧩

To mention I have the required hardcopy certificates of all of the following achievements below 👇
If required I can provide the scanned copies.

  • Represented my school at National Children Science Congress(NCSC) at regional Level(2017).
  • Participated in Regional Level Jawaharlal Nehru Science, Mathematics & Environment Exhibition (2016).
  • Participated in Technothlon Championship (2016).
  • Participated in Digital Wellness Online Challenge organized by Digital India (2015).
  • Camel Art Contest winner (2015, 2014, 2010, 2009, 2006).
  • Finalist in State level drawing and painting competition 2014 and got a cash prize of 1000 at that time.
  • Regional winner in Bank of Baroda Canvas Competition(2014).
  • Participated in Hobby Ideas painting Workshop in 2014.
  • Participated in Orissa Modern Art Gallery(OMAG) in 2013.
  • Represented my school at the State level painting competition on Energy Conservation organized by the Ministry of Power, Government of India(2011).
  • TLDR; I have got a lot of achievements in drawing and painting from childhood which is the reason why I am interested in designing and UX 😅

Leadership Activities (Eg - Head Boy/Girl at school or Coordinator of some society in college) 🗣

  • I was the Head Boy at my school during 10-12th classes.
  • I am a part of 2 societies at KIIT presently
    • Developer Student Clubs(DSC KIIT)(UX Designer)
    • Mozilla Club BBSR KIIT(Design Lead) We organize tech events on our KIIT campus.
  • I am handling the minor project as a lead with 2 other team members. I am coordinating and assigning the tasks to them and having weekly team meetings every Sunday and Thursday.

Volunteered the following Hackathons & events on the campus in the past few years

  1. Hacktoberfest KIIT(2020) with MayaData
  2. Smart India Hackathon KIIT internal Hacakthon(SIH -2020)
  3. The Garage Hackathon(DSC KIIT)(2019)
  4. Mozilla Hackathon 3.0 KIIT(2019)
  5. Dev Expo by DSC KIIT(2019)

We would love to know your interests and hobbies 🧠

  • Browsing the internet
    • Most used websites are Figma, Linkedin, Gmail, Github, web.whatsapp, Google, Youtube.
  • Creating and working on personal projects
  • Making some illustrations in Adobe Illustrator in my free time.
  • Reading business and startup related books for personal development. Reading articles in Quora.com & Medium.com.
  • Watching “TheFutur” channel on Youtube.
  • I do like to watch and am interested in watching series/good sci-fi thriller movies but this is a very low priority thing in my life.

Some Training and Certifications 📚

Training | Certification Name - 1

Full Stack Developer and UX intern/trainee | MayaData

Tools/Technology I was trained on for Training | Certification - 1?

UX & UI(Figma, Illustrator, Photoshop), Golang, ReactJS, GraphQL, Plotly.js & Chart.js(charting libraries), docker, kubernetes & mongoDB

Detail about my training - 1

  • I had started off working on UX of the product “Litmus” at MayaData. Litmus is a open-source SaaS platform for doing Chaos Engineering on Kubernetes.
  • Then I transformed my way going Full-Stack. and developing software using the stack Golang, GraphQL, React, Plotly.js, as well as contributing to UX where needed as part of design-dev weekly disscussions.
  • During the course of time, I had worked on multiple projects: UX of the internal dashboards of Litmus, the product landing page “litmuschaos.io”, and event page “chaoscarnival.io”, Kubera Propel Backend & Growth Metrics Backend for Kubernetes and also illustrated the brand mascot ‘ChaosBird’ for Litmus. I was working with cross-functional teams that are formed and disbanded according to requirements with Agile practices.

Training | Certification Name - 2

DSC Solution Challenge 2020

Tools/Technology you were trained on for Training | Certification - 2?

UX & UI, Adobe XD, Illustrator

Detail about my training - 2

  • DSC Solution Challenge was similar to a hackathon but the time frame was around a month and was conducted by Google Developers. We were required to submit a solution to an existing problem. Our team has created the ASL recognition(American Sign Language) app.
  • My role was to make the UX smooth and make a sleek UI with limited functionality for the disabled(having hearing, vision, and speech disability) people. We got selected for the 2nd round but definitely could not make it into the top 15 in the whole of India, but yes we have participated and at least submitted a prototype & MVP(Flutter, ML, Firebase) due to which we got the certificate of participation.
  • Team size was 4 including me.

Training | Certification Name - 3

Google Cloud | Qwiklabs

Detail about my training - 3

It is not exactly a training, but it is like self-paced training and depends on the individual, how much they want to learn. There are many labs that one can study and then attempt/complete on their own. I have completed 46 labs and 7 quests which focused mainly on Kubernetes, Docker, Google cloud-specific techniques.

Training | Certification Name - 4

Google Go (Golang) for beginners

Detail about my certification - 4

Learnt the syntax of Golang as well as the backend applications and techniques/best practices of it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment