REPORT ON INTERNSHIP FRONTEND Intern Under the Company “LOGICALLOOPS” 71-75, Shelton Street, Covent Garden, London, WC2H 9JQ, UK Submitted by D SAI LAKSHMI (19103314-13) DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING INSTITUTE OF TECHNOLOGY, GURU GHASIDAS VISHWAVIDYALAYA, BILASPUR -495009 1 DECLARATION I hereby declare that all the work presented in this report in the partial fulfilment of the requirement for the award of the degree of Bachelor of Technology in Computer Science & Engineering, Institute of Technology , Guru Ghasidas Vishwavidyalaya, Central University, Bilaspur, Chhattisgarh, is an authentic record of the work done during the internship of Project Architect Intern under the company Logicalloops UK. D Sai Lakshmi (19103314-13) 2 ACKNOWLEDGEMENT The satisfaction that accompanies the successful completion of any task would be incomplete without the mention of people whose ceaseless cooperation made it possible, whose constant guidance and encouragement crown all efforts with success. I take this opportunity to express our profound sense of gratitude and respect to all those who helped me throughout the project and my team whom I discussed every doubt. I thank all my senior developers from whom I learnt a lot of tech things. I would like to express my gratitude and appreciation to our company Logicalloops for being our guide and all those who gave us the opportunity to complete this internship. 3 ABSTRACT The following report enlists the details of the internship carried out in LOGICALOOPS . Logicalloops is an exceptionally hybrid venture capital firm that is designed in a way to help entrepreneurs and start-up to align their Ideation with real-world scenarios,provide them with insights of the current market to keep them ahead of market. Apart from seed Logicalloops also provides its in-house startups with well-versed hands. During the internship I got the exposure of working in a high paced product centric developing environment ,along with my talented team , we built a creative login & signup page , and added Trading view API to our webpage. All my work , helped me experience many domains like teamwork, time management, work environment, peering support carried out in the organization. Thus, the internship has provided me with the opportunity to improve my experience, improve my skills and acknowledge my strengths and weaknesses that would be more helpful to shape up my career in the future. 4 CERTIFICATE 5 TABLE OF CONTENTS TOPICS PAGE NO 1. INTRODUCTION 1.1. About the company 1.2. Vision 1.3. Mission 1.4. Internship Objectives 6 6 6 7 2. TECHNOLOGY STACK 2.1. HTML5 2.2. CSS 2.3. JavaScript 2.4. React.js 2.5. API 2.6. GitHub 7 10 12 14 17 19 3. DEPLOYED PROJECTS 3.1. Signup Page & API 24 4.TASKS AND RESPONSIBILITIES 4.1. Tasks Allotted 27 5.CONCLUSION 28 6.REFERENCES 28 6 INTRODUCTION About the Company Logicalloops is an exceptionally hybrid venture capital firm that is designed in a way to help entrepreneurs and startup to align their Ideation with real-world scenarios, provide them with insights of the current market with unaccustomed fabricated data leveraged with industry-leading deep tech machine learning technologies always to keep you ahead of market. Apart from seed Logicalloops also provides its in-house startups. Some of the technologies we have involved with the product Python, Fast API, HTML, CSS, Javascript, React.js, jQuery. Vision Our vision is to help entrepreneurs and startup to align their Ideation with realworld scenarios, provide them with insights of the current market with unaccustomed fabricated data leveraged with industry-leading deep tech machine learning technologies always to keep you ahead of market. We have a bias towards the founders and entrepreneurs who wants to develop the vision of an ecosystem rather than a single stander. To create products and services that can change lives. Mission Our mission is to enhance deliver market defining high quality solutions that create value and reliable competitive advantage . We started our journey after observing discrepancies in the existing system. So we adapted measures to make us the change that we wanted to see. 7 Internship Objectives 1. Identify goals and objectives of the company. 2. To build a login/signup page. 3. To connect the Trading View API with the frontend. 4. To come up with the possible strategies to gain a competitive advantage. 5. To learn about the professional ethics and working of corporate world & teamwork. TECHNOLOGY STACK HTML 5 HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. HTML is the combination of Hypertext and Markup language. Hypertext defines the link between web pages. A markup language is used to define the text document within the tag which defines the structure of web pages. This language is used to annotate (make notes for the computer) text so that a machine can understand it and manipulate text accordingly. Most markup languages (e.g. HTML) are humanreadable. The language uses tags to define what manipulation has to be done on the text. Elements and Tags: HTML uses predefined tags and elements which tell the browser how to properly display the content. Remember to include closing tags. If omitted, the browser applies the effect of the opening tag until the end of the page. 8 HTML page structure: The basic structure of an HTML page is laid out below. It contains the essential building-block elements (i.e. doctype declaration, HTML, head, title, and body elements) upon which all web pages are created. <!DOCTYPE html>: This is the document type declaration (not technically a tag). It declares a document as being an HTML document. The doctype declaration is not case-sensitive. <html>: This is called the HTML root element. All other elements are contained within it. <head>: The head tag contains the “behind the scenes” elements for a webpage. Elements within the head aren’t visible on the front-end of a webpage. HTML elements used inside the <head> element include: 9 <style>-This html tag allows us to insert styling into our webpages and make them appealing to look at with the help of CSS. <title>-The title is what is displayed on the top of your browser when you visit a website and contains title of the webpage that you are viewing. <base>-It specifies the base URL for all relative URL’s in a document. <noscript>– Defines a section of HTML that is inserted when the scripting has been turned off in the users browser. <script>-This tag is used to add functionality in the website with the help of JavaScript. <meta>-This tag encloses the meta data of the website that must be loaded every time the website is visited. For eg:- the metadata charset allows you to use the standard UTF-8 encoding in your website. This in turn allows the users to view your webpage in the language of their choice. It is a self closing tag. <link>– The ‘link’ tag is used to tie together HTML, CSS and JavaScript. It is self closing. <body>: The body tag is used to enclose all the visible content of a webpage. In other words, the body content is what the browser will show on the front-end. An HTML document can be created using any text editor. Save the text file using .html or .htm. Once saved as an HTML document, the file can be opened as a webpage in the browser. 10 CSS : CSS (Cascading Style Sheets) is used to apply styles to web pages. Cascading Style Sheets are fondly referred to as CSS. It is used to make web pages presentable. The reason for using this is to simplify the process of making web pages presentable. It allows you to apply styles on web pages. More importantly, it enables you to do this independently of the HTML that makes up each web page. Styling is an essential property for any website. It increases the standards and overall look of the website that makes it easier for the user to interact with it. A website can be made without CSS, as styling is MUST since no user would want to interact with a dull and shabby website. So for knowing Web Development, learning CSS is mandatory. There are three types of CSS which are given below: • Inline: Inline CSS contains the CSS property in the body section attached with the element known as inline CSS. • Internal or Embedded: The CSS ruleset should be within the HTML file in the head section i.e the CSS is embedded within the HTML file. • External: External CSS contains a separate CSS file that contains only style property with the help of tag attributes. Why is CSS used in HTML? • Solves a big problem: Font, color, background style, element alignments, border, and size tags had to be duplicated on each web page before CSS. This was a lengthy procedure. • Saves a lot of time: Because CSS style definitions are stored in external CSS files, updating only one file can modify the entire website. • Provide more attributes: CSS gives more specific features for defining the look and feel of a website than simple HTML. 11 • Pages load faster: CSS doesn’t require you to write HTML tag attributes all of the time. A tag’s rule can be written once and applied to all instances of the tag. As a result, CSS uses less code, resulting in speedier download times. • Easier Website maintenance: CSS makes website maintenance much easier. If we need to make a global change to the file, we can simply alter the style, which will update all of the elements on the web page. • Multiple device compatibility: We can use CSS with older language versions because it is compatible with them. CSS makes it possible to optimize material for several devices. • Base for web development: HTML and CSS is the basic skill that every web developer should know. It is the basic skill that is required for building a website. • Makes your website look attractive: A website that’s dull and plain will not attract the user, so adding some style would surely make your website presentable to the user. • Makes the design come live: A web developer is responsible for making the design given to him as a live product. It is used for styling to develop the design of the website. • Increases user experience of the website: A website with a simple yet beautiful UI would help the users to go through the website easily. It is used to make the user interface better. • More career opportunities: Since CSS is a basic requirement while learning Web Development, therefor there are abundant career opportunities for it. As a freelancer, you can land up to many projects. 12 CSS SYNTAX: A CSS rule set contains a selector and a declaration block. Selector: Selector indicates the HTML element you want to style. It could be any tag like <h1>, <title> etc. Declaration Block: The declaration block can contain one or more declarations separated by a semicolon. For the above example, there are two declarations: 1. color: yellow; 2. font-size: 11 px; Each declaration contains a property name and value, separated by a colon. JAVASCRIPT : JavaScript (js) is a light-weight object-oriented programming language which is used by several websites for scripting the webpages. It is an interpreted, full-fledged programming language that enables dynamic interactivity on websites when applied to an HTML document. It was introduced in the year 1995 for adding programs to the webpages in the Netscape Navigator browser. Since then, it has been adopted by all other graphical web browsers. With JavaScript, users can build modern web applications to interact directly without reloading the page every time. The traditional website uses js to provide several forms of interactivity and simplicity. 13 Features of JavaScript All popular web browsers support JavaScript as they provide built-in execution environments. • JavaScript follows the syntax and structure of the C programming language. Thus, it is a structured programming language. • JavaScript is a weakly typed language, where certain types are implicitly cast (depending on the operation). • JavaScript is an object-oriented programming language that uses prototypes rather than using classes for inheritance. • It is a light-weighted and interpreted language. • It is a case-sensitive language. • JavaScript is supportable in several operating systems including, Windows, macOS, etc. • It provides good control to the users over the web browsers. Application of JavaScript JavaScript is used to create interactive websites. It is mainly used for: • Client-side validation, • Dynamic drop-down menus, • Displaying date and time, • Displaying pop-up windows and dialog boxes (like an alert dialog box, confirm dialog box and prompt dialog box), • Displaying clocks etc. 14 React.js ReactJS is a declarative, efficient, and flexible JavaScript library for building reusable UI components. It is an open-source, component-based front end library which is responsible only for the view layer of the application. It was initially developed and maintained by Facebook and later used in its products like WhatsApp & Instagram. The main objective of ReactJS is to develop User Interfaces (UI) that improves the speed of the apps. It uses virtual DOM (JavaScript object), which improves the performance of the app. The JavaScript virtual DOM is faster than the regular DOM. We can use ReactJS on the client and server-side as well as with other frameworks. It uses component and data patterns that improve readability and helps to maintain larger apps. Today, most of the websites are built using MVC (model view controller) architecture. In MVC architecture, React is the 'V' which stands for view, whereas the architecture is provided by the Redux or Flux. A ReactJS application is made up of multiple components, each component responsible for outputting a small, reusable piece of HTML code. The components are the heart of all React applications. These Components can be nested with other components to allow complex applications to be built of simple building blocks. ReactJS uses virtual DOM based mechanism to fill data in HTML DOM. The virtual DOM works fast as it only changes individual DOM elements instead of reloading complete DOM every time. To create React app, we write React components that correspond to various elements. We organize these components inside higher level components which define the application structure. For example, we take a form that consists of many elements like input fields, labels, or buttons. We can write each element of the form as React components, and then we combine it into a higher-level component, i.e., the form component itself. The form components would specify the structure of the form along with elements inside of it. 15 Today, many JavaScript frameworks are available in the market(like angular, node), but still, React came into the market and gained popularity amongst them. The previous frameworks follow the traditional data flow structure, which uses the DOM (Document Object Model). DOM is an object which is created by the browser each time a web page is loaded. It dynamically adds or removes the data at the back end and when any modifications were done, then each time a new DOM is created for the same page. This repeated creation of DOM makes unnecessary memory wastage and reduces the performance of the application. Therefore, a new technology ReactJS framework invented which remove this drawback. ReactJS allows you to divide your entire application into various components. ReactJS still used the same traditional data flow, but it is not directly operating on the browser's Document Object Model (DOM) immediately; instead, it operates on a virtual DOM. It means rather than manipulating the document in a browser after changes to our data, it resolves changes on a DOM built and run entirely in memory. After the virtual DOM has been updated, React determines what changes made to the actual browser's DOM. The React Virtual DOM exists entirely in memory and is a representation of the web browser's DOM. Due to this, when we write a React component, we did not write directly to the DOM; instead, we are writing virtual components that react will turn into the DOM. React Features Currently, ReactJS gaining quick popularity as the best JavaScript framework among web developers. It is playing an essential role in the front-end ecosystem. The important features of ReactJS are as following. • JSX • Components • One-way Data Binding • Virtual DOM • Simplicity & Performance 16 JSX JSX stands for JavaScript XML. It is a JavaScript syntax extension. Its an XML or HTML like syntax used by ReactJS. This syntax is processed into JavaScript calls of React Framework. It extends the ES6 so that HTML like text can co-exist with JavaScript react code. It is not necessary to use JSX, but it is recommended to use in ReactJS. Components ReactJS is all about components. ReactJS application is made up of multiple components, and each component has its own logic and controls. These components can be reusable which help you to maintain the code when working on larger scale projects. One-way Data Binding ReactJS is designed in such a manner that follows unidirectional data flow or one-way data binding. The benefits of one-way data binding give you better control throughout the application. If the data flow is in another direction, then it requires additional features. It is because components are supposed to be immutable and the data within them cannot be changed. Flux is a pattern that helps to keep your data unidirectional. This makes the application more flexible that leads to increase efficiency. Virtual DOM A virtual DOM object is a representation of the original DOM object. It works like a oneway data binding. Whenever any modifications happen in the web application, the entire UI is re-rendered in virtual DOM representation. Then it checks the difference between the previous DOM representation and new DOM. Once it has done, the real DOM will update only the things that have actually changed. This makes the application faster, and there is no wastage of memory. 17 Performance ReactJS is known to be a great performer. This feature makes it much better than other frameworks out there today. The reason behind this is that it manages a virtual DOM. The DOM is a cross-platform and programming API which deals with HTML, XML or XHTML. The DOM exists entirely in memory. Due to this, when we create a component, we did not write directly to the DOM. Instead, we are writing virtual components that will turn into the DOM leading to smoother and faster performance. API Application Programming Interface (API) is a software interface that allows two applications to interact with each other without any user intervention. API is a collection of software functions and procedures. In simple terms, API means a software code that can be accessed or executed. API is defined as a code that helps two different software’s to communicate and exchange data with each other. It offers products or services to communicate with other products and services without having to know how they’re implemented. • The full form of API is Application Programming Interface. • API is defined as a software code that helps two different software’s to communicate and exchange data with each other. • API helps you to plan a business model • Five types of API are 1) Open API 2) Partner API 3) Internal API 4) High-level 5) Low-level API • A Web API is an application programming interface which is use either for web server or a web browser. • There are two types of web APIs 1) Server Side API 2) Client Side API • Some popular API testing tools are 1) Postman 2) Ping API and 3) vRest. 18 Features of API Here are some important features of API: • It offers a valuable service (data, function, audience,.). • It helps you to plan a business model. • Simple, flexible, quickly adopted. • Offers great developer support. Here, are some reason for using API: • Application Programming Interface acronym API helps two different software’s to communicate and exchange data with each other. • It helps you to embed content from any site or application more efficiently. • APIs can access app components. The delivery of services and information is more flexible. • Content generated can be published automatically. • It allows the user or a company to customize the content and services which they use the most. Types of API : There are mainly four main types of APIs: • Open APIs: These types of APIs are publicly available to use like OAuth APIs from Google. It has also not given any restriction to use them. So, they are also known as Public APIs. • Partner APIs: Specific rights or licenses to access this type of API because they are not available to the public. • Internal APIs: Internal or private. These APIs are developed by companies to use in their internal systems. It helps you to enhance the productivity of your teams. • Composite APIs: This type of API combines different data and service APIs. 19 GitHub Github is the most popular and widely used version control system today. Originally developed as an open source project in 2005 by the creator of the Linux operating system, it is a matured and actively maintained environment. A huge number of developers rely upon GitHub version control to develop several types of commercial and non-commercial projects. Git-based developers are well thought of and considered as valuable resources. A version control system records changes carried out to a file, or a set of files over time, and helps you to recall specific versions of the code later on when you need it. If you’re a developer or a web designer and want to keep track of each and every version of your code developed for a particular feature, a Version Control System “VCS” allows you to: • Revert the code files back to their previous state • Recall and revert the entire project back to its previous state • Compare code changes over specific durations of time • Find who last modified a piece of code that might be causing an issue or a problem .It’s important to know why version control systems are necessary. 1. Importance of code repository For developers, the source code making up the software project is the main area of concern. Teams often put in great efforts to organize and store the code in a proper manner so it can be used again for further development. For software development teams the code repository – a database where the code, including all changes, carried out on it – forms the single source of invaluable knowledge and the centre of all activity. 20 2. Why did the code need to be changed from time to time? Product features and software functionality need to be updated as and when market conditions change and end users provide new feedback. Teams have to work upon features already developed and offer extra functionality to the product to remain competitive in the market. Thus new versions of existing code have to be developed by the team from time to time. 3. Version control systems For developers and the team, it can be difficult to maintain and keep track of different versions of the code. Moreover, developers may be required to compare today’s version of the code with yesterday’s version, or a version developed last year. Version control systems help the team to keep track of various versions developed over time. Such systems also log information as to what code was developed, who developed it, and when the changes were carried out. This helps to compare the performance of different versions and also know when bugs were introduced and fixed in the code. Advantages of GitHub: 1. Performance Git performs very strongly and reliably when compared to other version control systems. New code changes can be easily committed, version branches can be effortlessly compared and merged, and code can also be optimized to perform better. 21 Algorithms used in developing Git take the full advantage of the deep knowledge stored within, with regards to the attributes used to create real source code file trees, how files are modified over time and what kind of file access patterns are used to recall code files as and when needed by developers. Git primarily focuses upon the file content itself rather than file names while determining the storage and file version history. Object formats of Git repository files use several combinations of delta encoding and compression techniques to store metadata objects and directory contents. 2. Security Git is designed specially to maintain the integrity of source code. File contents as well as the relationship between file and directories, tags, commits, versions etc. are secured cryptographically using an algorithm called SHA1 which protects the code and changes history against accidental as well as malicious damage. You can be sure to have an authentic content history for your source code with GitHub. 3. Flexibility A key design objective of Git is the kind of flexibility it offers to support several kinds of nonlinear development workflows and its efficiency in handling both small scale and large scale projects as well as protocols. It is uniquely designed to support tagging and branching operations and store each and every activity carried out by the user as an integral part of “change” history. Not all VCSs support this feature. 22 4. Wide acceptance Git offers the type of performance, functionality, security, and flexibility that most developers and teams need to develop their projects. When compared to other VCS Git is the most widely accepted system owing to its universally accepted usability and performance standards. 5. Quality open source project Git is a widely supported open source project with over ten years of operational history. People maintaining the project are very well matured and possess a long-term vision to meet the long-term needs of users by releasing staged upgrades at regular intervals of time to improve functionality as well as usability. Quality of open source software made available on Git is heavily scrutinized a countless number of times and businesses today depend heavily on Git code quality. Use of GitHub in organization Git radically changes the way how your team will create and deliver work to you. Various processes including designing, development, product management, marketing, customer support can be easily handled and maintained using Git in your organization. 1. Feature Branch Workflow Git has powerful branching capabilities. To start work, developers have to first create a unique branch. Each branch functions in an isolated environment while changes are carried out in the codebase. This ensures that the master branch always supports productionquality code. Therefore, besides being more reliable it’s also much easier to edit code in a Git branch rather than editing it directly using an external editor. 23 2. Distributed Development Since Git is a distributed VCS it offers a local repository to each developer with its own history of commits. Therefore, you don’t require a network connection to create commits, inspect previous file versions, or check differences between two or more commits. Also, it’s much easier to scale the team. With Git, users can be easily added or removed as and when required. Other team members can continue working using their local repositories and are not dependent upon whether a new branch is added or an older one closed. 3. Pull Requests A developer calls a pull request to ask another developer to merge one of his/her branches into the other’s repository. Besides making it a lot easier for project leaders to monitor and track code changes, “pulling” also facilitates other developers to discuss their work before integrating the code with the codebase. Moreover, if a developer can’t continue work owing to some hard technical problem, he/she can initiate a pull request to seek help from the rest of the team. 4. Community Git is very popular, widely used, and accepted as a standard version control system by the vast majority within the developer’s community. It’s much easier to leverage 3rd-party libraries and encourage other developers to fork your open source code using Git. The sheer number of Git users make it easy to resolve issues and seek outside help using online forums. 24 DEPLOYED PROJECT Login/SignUp Page & Trading View API The main project of the company is to develop a login/signup page where basically a user need to provide their account details while logging in in their account. Login/Sign up page can be counted as a gateway to extensive user interaction. Usually Login system prevents unauthorized access to private data and allows elaborate communication. It requires username and a password for user identification and authentication. A login form is used to put the user login and password that the user has already created and the signup form is the page where user can create their login details by filling in their own data as the form requires. Fig: Frontend Aspect The second task I worked on is Trading View API .APIs are the back-end data that go into any financial platform that you aren’t able to see when you’re on the website or platform.Our Trading View API allows users to retrieve financial information , real-time stock market analysis the moment they need it. 25 Trading APIs allow you to build custom front-end solutions that run on other reputed brokers’ data and functionality. Here’s how API : • The clients can get access to historical market data & can stay up to date with the executable pricing list along with living market data • The clients can analyze the market closely & An immediate order execution can take place • Another advantage is that clients can perform anonymous trading. As most of the brokers don’t register or track the users of their back-end system • The clients can fetch powerful features and implement them to a new system in no time using API • Utilizing API trading services of existing trading brokers saves time and cost to the clients • Lastly, the clients can access all the risk management features along with other necessary trading tools • The communication between the trading API website and you happens via small packets of data consisting only of the information it is told to take. • With a trading API, the most useful point is that the user interface can be customized to the needs of the traders. Hence, the trading API can be used as per your preference. • With a trading API, you can get the streaming or real-time data for your trades. For any trader, getting real-time data is the main and the first step. With quick access to real-time data, you can make your trading journey a success. 26 Fig: Trading view API connected page Fig: Login / Signup Page 27 TASKS AND RESPONSIBILITIES Tasks Allotted 1. Client side development of the project 2. Integration of various API’s and connecting frontend to backend 3. Maintenance of client side code to be error free Client Side development of the project In the first alloted task of my internship I have built the cliend/frontend side of the project from scratch and used various languages like HTML,CSS and Javascript for building the frontend. The code reusability and industry standards remains the biggest factor of writing structured code in the organisation for us.I have also worked with CSS frameworks namely Bootstrap and Neuomorphism and framework of Javascript namely React.js.On the login and signup part, I have worked upon the 2 factor auth and O-auth section and also sorted the complexities of JWT tokens in a users session during use. Integration of various API’s and connecting frontend to backend The second task alloted to me was to integrate some api. I implemented trading view charting library api's to generate the widgets which were the need of the hour. We as a team also worked upon integration of payments API of Coingate and CryptAPI to enhance the count of accepting currencies from 5 to 150 in the crytpo setting. I also worked partially on the binance API integration from frontend side. Maintenance of client side code to be error free This was one of the most challenging task which was alloted because , in this I had to think solely as a corporate employee about maintenance and reusability as well as the proper industry level structuring of the frontend code section. The code part maintenance is also been assigned to another team which I was a part of, and they did collaborate and help me in making me understand the norms of the corporate. 28 CONCLUSION During this Internship at Logicalloops , I have gained a lot of experience and knowledge from knowledgable colleagues and senior developers. I have also improved my skills in various implementation techniques, deployment services and teamwork. Besides, I also got to know about the organization culture . Creating a financial tech product is really a big task, apart from just coding it requires a lot of pre and post efforts & knowledge . Right from identifying the problem, designing our solutions, coding, testing and maintaining, a CSE student should be known for every aspect of software development. I find myself lucky to work at a company which is giving me exposure to all this . Overall I learned a lot and gained a lot of experience. Working on these technologies helped me realize my strengths as well as my weaknesses and helped me experience the actual work environment and work culture of industry. Completing projects here made me realize the importance of testing, following best practices, and working in a team. The skills I have acquired here will definitely help me in my career ahead. REFERENCES [1] Trading View API - https://www.tradingview.com/rest-api-spec/ [2] Github - https://github.com/ [3] React.js - https://reactjs.org/docs/getting-started.html
0
You can add this document to your study collection(s)
Sign in Available only to authorized usersYou can add this document to your saved list
Sign in Available only to authorized users(For complaints, use another form )