Udated readme, minor polishing
This commit is contained in:
23
README.md
23
README.md
@@ -10,7 +10,28 @@
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
|
## What is this and who is it for 🤷♀️
|
||||||
|
|
||||||
|
I do web development and UX design consulting and this is a showcase product I've built in my spare time. It's a very good example of what a modern real-world React codebase looks like.
|
||||||
|
|
||||||
|
There are many public React projects out there but most of them are either way too simple or [way too complex](https://github.com/Automattic/wp-calypso). I like to think that this project contains enough complexity to offer valuable insights to React developers of all skill levels while still being relatively easy to understand.
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
### Client
|
||||||
|
|
||||||
|
- Proven, scalable, and easy to understand project structure
|
||||||
|
- Written in modern React, only functional components with hooks
|
||||||
|
- A variety of custom light-weight UI components such as datepicker, modal, various form elements etc
|
||||||
|
- Simple local React state management, without redux, mobx, or similar
|
||||||
|
- Custom webpack/babel setup, without create-react-app or similar
|
||||||
|
|
||||||
|
### API
|
||||||
|
|
||||||
|
- Simple, scalable, and easy to understand project structure
|
||||||
|
- Written in TypeScript and using TypeORM
|
||||||
|
|
||||||
## Setting up development environment 🛠
|
## Setting up development environment 🛠
|
||||||
|
|
||||||
|
|||||||
@@ -112,7 +112,7 @@ const seedIssues = (project: Project): Promise<Issue[]> => {
|
|||||||
timeSpent: 3,
|
timeSpent: 3,
|
||||||
reporterId: users[1].id,
|
reporterId: users[1].id,
|
||||||
project,
|
project,
|
||||||
users: [users[0], users[1]],
|
users: [users[1], users[2]],
|
||||||
}),
|
}),
|
||||||
createEntity(Issue, {
|
createEntity(Issue, {
|
||||||
title:
|
title:
|
||||||
|
|||||||
@@ -6,6 +6,7 @@ export default createGlobalStyle`
|
|||||||
html, body, #root {
|
html, body, #root {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
|
min-width: 768px;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
|||||||
@@ -1,13 +1,15 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import { CopyLinkButton } from 'shared/components';
|
import { Button } from 'shared/components';
|
||||||
|
|
||||||
import { Header, BoardName } from './Styles';
|
import { Header, BoardName } from './Styles';
|
||||||
|
|
||||||
const ProjectBoardHeader = () => (
|
const ProjectBoardHeader = () => (
|
||||||
<Header>
|
<Header>
|
||||||
<BoardName>Kanban board</BoardName>
|
<BoardName>Kanban board</BoardName>
|
||||||
<CopyLinkButton />
|
<a href="https://github.com/oldboyxx/jira_clone" target="_blank" rel="noreferrer noopener">
|
||||||
|
<Button icon="github">Github Repo</Button>
|
||||||
|
</a>
|
||||||
</Header>
|
</Header>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
@@ -17,6 +17,9 @@ export const Sidebar = styled.div`
|
|||||||
@media (max-width: 1100px) {
|
@media (max-width: 1100px) {
|
||||||
width: ${sizes.secondarySideBarWidth - 10}px;
|
width: ${sizes.secondarySideBarWidth - 10}px;
|
||||||
}
|
}
|
||||||
|
@media (max-width: 999px) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const ProjectInfo = styled.div`
|
export const ProjectInfo = styled.div`
|
||||||
|
|||||||
@@ -10,4 +10,7 @@ export const ProjectPage = styled.div`
|
|||||||
@media (max-width: 1100px) {
|
@media (max-width: 1100px) {
|
||||||
padding: 25px 20px 50px ${paddingLeft - 20}px;
|
padding: 25px 20px 50px ${paddingLeft - 20}px;
|
||||||
}
|
}
|
||||||
|
@media (max-width: 999px) {
|
||||||
|
padding-left: ${paddingLeft - 20 - sizes.secondarySideBarWidth}px;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|||||||
Reference in New Issue
Block a user