My Stocks is a web application where the user is able to search for companies and their current stock prices. Also, the user can save companies to their list of favorites.
The project is build with the following technologies:
- React
- Redux
- TypeScript
- Jest
- React Testing Library
- Webpack
- Styled Components
Most of the commits have a tag (like [MS-08]
) corresponding to the tasks available on this trello board. Thus, it is possible to look for more detailed information about each feature by accessing tasks like Search for company details and Favorite a company.
The project is online here: my-stocks.netlify.app
Prerequisites:
node 14 (recommended: 14.15.0)
npm 6 (recommended: 6.14.8)
Step 1: Install dependencies:
npm install
Step 2: Create a development.json
file inside /env
folder with the API URL and the API token:
{
"API_URL": "https://cloud.iexapis.com",
"API_TOKEN": "Tpk_this_is_an_api_token_example"
}
Step 3: Start it locally:
npm run start
Step 4: Access http://localhost:4000/
Generate build files:
npm run build
Run tests:
npm run test
Run test coverage:
npm run test:coverage
Run eslint:
npm run lint:check
The project is divided as follows:
└───.circleci contains the 'config.yml' file with the pipeline steps
└───config config files related to tests (jest) and build (webpack) are located here
| └───jest
| └───webpack
│
└───env this is where you should put the development.json file in order to run the application locally. The production.json file (with the hidden token) is automatically inserted through the CI.
│
└───public contains the index.html file and the assets (such as images and SVGs)
│
└───src source foulder of the project
└───app contains the most general files of the projects, like routing, theme providers and the main component file (app.tsx)
└───client-api contains the API endpoints, models and fetching logic
└───common custom hooks and useful logic for a variety of components are located here
└───components contains the main reusable components of the application (like buttons, inputs)
└───pages folder designed to place the pages of the application, like Company Page, Favorites Page and Home Page
└───store folder for Redux slices and store configuration
MIT