Clone of Smallcase

Pratham Sharma
4 min readNov 13, 2021

--

Smallcases are a new way to invest in stocks. A smallcase is an intelligently weighted basket of upto 50 stocks that reflects a theme, idea or strategy. You will find here different types of stocks in which you can invest easily and safely.

Cloning smallcase was our project for the construct week at Masai School. We have implemented maximum functionalities that the original website has using Javascript, designs were implemented using tailwind or custom style sheets and we made our own API using JSON server.

Pages and Features

  • Homepage

Home page is built with beautiful UI components, and it shows the step by step process to users of buying and investing in stocks using smallcase website and display the valuable feedback on various social media i.e. Twitter, Facebook, Instagram, etc. .

HOMEPAGE
  • Signup and Login

We have used manual account creation as well as oauth for authentication and authorization , for user security we have used bcryptjs as well as we have implemented authorization in all the pages.

Signup page
Login page
  • Discover

Discover page is made for user to easily check popular, favourite and recently launched smallcases, which is sorted according to their respective categories. We have also made search engine in the collection section where user can search about related smallcase he/she may want to know about.

Discover Page
  • Watchlist

User can add smallcases into account which will be saved in database by clicking “add to watchlist” button available on product detail page and can follow it.

Watchlist Page
  • All Smallcases

In this page user can sort or filter all the stocks and smallcases according to their need, like sorting according to price, level of risk associated with it, and investment strategy as well as can move to different pages to see all smallcases. We have implemented sorting and pagination completely from backend.

All Smallcases
  • Stock Display

User may further click on desirable category or searched stock to land in this page and can see the details for that particular smallcase. In this page user can either add smallcases into watchlist or can proceed to payment

Stock Display
  • Payment

For payment process we have integrated razorpay through which user can complete payment process on clicking payment option an OTP will be send to user mobile number and if it is valid the payment will succeed else fail.

Payment Page
  • Investments

All the smallcases which user have purchased will store here and everything will be stored in database and will remain even after the signout and can be referred from any device.

Investments Page
  • Create

User may create smallcases of his favorite stocks and invest in them in group.

Create Page
  • Invest

After user made his mind to buy certain stock or selfmade smallcase he may click on invest button and will be directed to this page, here he needs to provide payment details to buy that stock or smallcase.

Team Members and their Github accounts

Deployment Link

https://smallcaseproject.herokuapp.com/home

--

--